2

I'm fairly new to Bootstrap. I have a script that works, but I'm having trouble modifying it.

The script does two things:

1) When you click a header, the following div opens or closes.

2) When you click a header, one of two glyphicons is displayed next to the header, depending on whether you're opening or closing the following div.

In other words, it works pretty much like Wikipedia's mobile pages (e.g. http://en.m.wikipedia.org/wiki/Mammal ). However, the JS gizmos on Wikipedia's pages are open by default, while I want to do just the opposite: The default setting should present visitors with nothing but a column of headers accompanied by down arrows (chevron-down glyphicons).

It sounds simple, but nothing I've tried works. Here's my HTML:

<div data-toggle="collapse" data-target="#target">
  <h2>
   <span class="only-collapsed glyphicon glyphicon-chevron-down"></span>
   <span class="only-expanded glyphicon glyphicon-remove-sign"></span>
   Test 1
  </h2>
</div>
<div id="target" class="collapse in">Hello, world!</div>

<div data-toggle="collapse" data-target="#target2">
  <h2>
   <span class="only-collapsed glyphicon glyphicon-chevron-down"></span>
   <span class="only-expanded glyphicon glyphicon-remove-sign"></span>
   Test 2
  </h2>
</div>
<div id="target2" class="collapse in">Hello, world!</div>

And here's my CSS:

.only-collapsed { display: none; }
.collapsed .only-collapsed { display: inline; }
.collapsed .only-expanded { display: none; }

As I said, it works just like Wikipedia's mobile page, but I want my text blocks CLOSED by default. I can successfully reverse the glyphicons by replacing the above CSS with the following styles, but it doesn't affect the div's containing text:

.only-expanded /* Down Arrow */ { display: none; }
.collapsed .only-expanded { display: inline; }
.collapsed .only-collapsed { display: none; }

In other words, the default setting is a header with a down arrow (good), but the text displays when it should be invisible.

I figured the opposite of collapse must be expand or open, so I modified by HTML and CSS using those terms, without success. There must be a really simple solution that I'm overlooking; can anyone clue me in?

I found what appears to be a really good (and presumably relevant) discussion @ Twitter bootstrap collapse: change display of toggle button

However, it appears to be a little more complicated than what I'm trying to do. I haven't been able to really digest it yet.

At any rate, is there a relatively simple solution someone can point out?

ON EDIT:

I implemented dim4web's suggestion, and it's working better in that the default shows a down arrow and no text display. The only problem is that when I click the header and the text opens, the down arrow remains (it should be replaced by an X).

This is my HTML:

<div data-toggle="collapse" data-target="#target">
  <h2>
   <span class="only-collapsed glyphicon glyphicon-chevron-down"></span>
   <span class="only-expanded glyphicon glyphicon-remove-sign"></span>
  New Test
  </h2>
</div>
<div id="target" class="collapse">Hello, Universe!</div>

<div data-toggle="collapse" data-target="#target2">
  <h2>
   <span class="only-collapsed glyphicon glyphicon-chevron-down"></span>
   <span class="only-expanded glyphicon glyphicon-remove-sign"></span>
  New Test
  </h2>
</div>
<div id="target2" class="collapse">Hello, Universe 2!</div>
Community
  • 1
  • 1

2 Answers2

1

http://jsfiddle.net/qn6tsmwa/

  1. use .collapse('hide') to hide/close all div.collapse
  2. use show.bs.collapse and hide.bs.collapse to hide or show up appropriate icons

CSS:

.only-expanded {
    display:none
}

JQ:

$('.collapse').collapse('hide').on('show.bs.collapse', function (e) {
    var id = $(this).attr('id');
    $('div[data-target="#' + id + '"]').find('.only-expanded').show();
    $('div[data-target="#' + id + '"]').find('.only-collapsed').hide();

}).on('hide.bs.collapse', function () {
    var id = $(this).attr('id');
    $('div[data-target="#' + id + '"]').find('.only-expanded').hide();
    $('div[data-target="#' + id + '"]').find('.only-collapsed').show();
})
dm4web
  • 4,642
  • 1
  • 14
  • 20
1

Opposite collapsed is: class="panel-collapse collapsed collapse show"

Bugs
  • 4,491
  • 9
  • 32
  • 41
j.doe
  • 11
  • 1