I am fairly new to working with Bootstrap. While I have a script that functions, I am struggling to make modifications to it.
The script has two main functionalities:
1) Clicking on a header will toggle the visibility of the following div.
2) Clicking on a header will also display one of two glyphicons next to the header depending on whether the following div is being opened or closed.
This functionality resembles what can be seen in Wikipedia's mobile pages (e.g. ). However, unlike Wikipedia's default open settings for JS gizmos, I want visitors to see only a column of headers accompanied by down arrows (chevron-down glyphicons) by default.
While this may seem straightforward, none of my attempts have been successful so far. Below is my HTML code:
<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 is my CSS code:
.only-collapsed { display: none; }
.collapsed .only-collapsed { display: inline; }
.collapsed .only-expanded { display: none; }
While the setup currently mirrors Wikipedia's mobile page behavior, I aim to have my text blocks CLOSED by default instead. By making changes to the CSS styles as shown below, I can successfully reverse the direction of the glyphicons. However, this alteration does not affect the visibility of the text content within the divs:
.only-expanded /* Down Arrow */ { display: none; }
.collapsed .only-expanded { display: inline; }
.collapsed .only-collapsed { display: none; }
In essence, though the headers initially show a down arrow (as desired), the text is still visible when it should remain hidden.
I assumed that the opposite of collapse could be expand or open, and accordingly tried modifying my HTML and CSS using these terms without success. There must be a simple solution that I might be overlooking; any pointers would be greatly appreciated!
I came across a potentially helpful discussion at Twitter bootstrap collapse: change display of toggle button, but it seems a bit more complex than what I am aiming to achieve, and I haven't fully grasped its implications yet.
Regardless, is there an efficient and straightforward solution that someone could share?
ON EDIT:
Having implemented dim4web's suggestion, there has been improvement in the sense that the default view now displays a down arrow without showing the text content. However, the issue lies in that when the text is expanded upon clicking the header, the down arrow remains visible instead of being replaced by an 'X' as intended.
Here is my updated HTML code:
<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>