A trick to swap a links text and expand/collapse content.

Bootstrap Studio Help
1

So I got this little trick and I wanted to share.

We at times have a rather long footer copyright section. We decided to make the rather lengthy section be smaller and then expand to display more if you wanted to read all of it.

I'm using the Collapse method http://getbootstrap.com/javascript/#collapse rather then some others because I'm using the built-in method and the CSS just swaps the text. I don't have to write additional JS to swap the text or expand function. Also I didn't want to de-construct the styling of the Accordion.

<footer>
    ...
    <div>
        <span>©Copyright <span>2016 </span> Blah blah 
            <a class="btn btn-link btn-xs viewMore" role="button" href="#collapseExample"
            aria-expanded="false" aria-controls="collapseExample" data-toggle="collapse"> </a>
        </span>
        <div id="collapseExample" class="collapse" aria-expanded="false"">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ....</p>
        </div>
    </div>
</footer>

So I start with a sentence then at the end I have a link that has nothing but a "space" for it.

The CSS below is what controls the "text" that is displayed based on the state of the collapsed/expanded being true or false. It will inject into the link the text that is in the content property value. When you first come to the page it displays [View More] when clicked it expands and then displays [View Less] for the link, click again and it collapses the expanded content and once again the link is back to saying [View More].

footer .viewMore[aria-expanded="false"]:before{
  content:"[ View More ]";
}

footer .viewMore[aria-expanded="true"]:before{
  content:"[ View Less ]";
}

Before Bootstrap, I had used a hidden checkbox to do a similar thing. It doesn't have to be related only to the footer, I've used this method for other areas of my pages.

I hope some one finds it useful :)

Saj

2

Thank you for sharing this, Saj! This is a great trick and you are saving yourself from having to write custom JS. I am sure I'll put this to good use some day :)

3

Thank you Saji for sharing this great trick. As I am new to Bootstrap, would it be possible to share the code in its entirety.

4

Nice, Saj. I am wondering if this, combined with some of the BS Tag code and your JS additions if there could be a new type of page.

5

@alshariff, the code I provided is literally the code. The key is pretty much the CSS code.

footer .viewMore[aria-expanded="false"]:before{
    content:"[ View More ]";
}

footer .viewMore[aria-expanded="true"]:before{
    content:"[ View Less ]";
}

The Collapse component already has all the expanding/collapsing function built into it from the Bootstrap framework. All I am doing (i.e. the CSS) is swapping what the text says in the button/link that you click to cause the expand/collapse.

So if you wanted to just use the Collapse component in the BSS app, you could. Unfortunately, the Collapse component is locked so you can't add any text before the button in the component it's self but you could right click on the component in the Overview pane and select Convert to HTML to so you can use the Custom Code block to get around it :)

Just drag/drop the Collapse component where ever you want it. Then in the Overview pane select the Collapse component and expand it and then select the Button element. Then expand the HTML pane and then the Attribute pane add the class viewMore. Then select the text of the button and delete it.

<div>
   < a class="btn btn-default viewMore" data-toggle="collapse" aria-expanded="false" aria-controls="collapse-1" role="button" href="#collapse-1"><!-- space --></a>
    <div class="collapse" id="collapse-1">
        <p>Collapse content.</p>
    </div>
</div>

Then add your CSS which would be this.

.viewMore[aria-expanded="false"]:before {
  content:"[ View More ]";
}

.viewMore[aria-expanded="true"]:before {
  content:"[ View Less ]";
}

You should see the text in the button as [ View More ] even in the BSS app, but, to test it you have to use the Preview feature of the app in the top right of the app.

Saj

6

If you were looking for the checkbox trick, this is the code for that. Using all drag/drop components

HTML example

<span>Just some text </span>
<input type="checkbox" class="hidden" id="testlink" />
<label for="testlink"> Link to click on to view <span> </span></label>
<p>Paragraph content</p>

CSS code

input[type="checkbox"] ~ label {
  cursor:pointer;
}

input[type="checkbox"] ~ label span:before {
  content:"more";
}

input[type="checkbox"]:checked ~ label span:before {
  content:"less";
}

input[type="checkbox"] ~ p {
  display:none;
}

input[type="checkbox"]:checked ~ p {
  display:block;
}

Saj

7

Hi Saj, I am also new in Bootstrap and I would like your idea but it does not work for me. I tried it in JSFiddle and the link text did not change. Could you help me, please.

Sanyi

8

Hi Saj, It works with the version 3.3.7 but just in prewiev window in the visual window not. Thank you. Sanyi

9

It doesn't work in the apps visual window because the app doesn't run things like that, it's just a visual display not an "active" visual display.

Saj