Gallery with "Show/Less More" button


I was trying to make a gallery with "show/less more" button and I used Lightbox Gallery. I duplicated the container inside the gallery and created 2 divs#wrap, then put the codes I found on the Internet and created a button after the second container. I've done a working button so far, but it is not showing less and it does not disappear when all the content is shown (my bad). It was hard to find codes for using the studio application, so I want you to consider adding a gallery with a button. That's all for now :)


I'm not really sure all that you have, but it sounds like you would want to use the collapse functionality of bootstrap.

If you are also trying to get the wording changed you can use the content property of the pseudo :before property rule for example you would remove the buttons text because the CSS will insert the necessary text for you. Although, you may want to put in some additional text wrapped in a span in the button but using the accessibility utility class sr-only on it.

<a href="#collapse-1"> `<span class="sr-only">Gallery Image Toggle</span>`</a>
<div class="collapse" id="collapse-1">
    `<p>Collapse content.</p>`

Then use something like the following CSS

.more-gallery-toggle[aria-expanded=false]:before {
  content:"Show More";

.more-gallery-toggle[aria-expanded=true]:before {
  content:"Show Less";

When collapsed the Buttons wording says Show More, when expanded it changes to say Show Less. The wording Gallery Image Toggle is only visible in a screen reader situation.

Now if you want the button to go away then you could use CSS that effectively makes it hidden or JS code that removes it.


Looks like the forum stripped out a bunch of the HTML in the button so I'll try that code again.

< a class="btn btn-primary more-gallery-toggle" data-toggle="collapse" aria-expanded="false" aria-controls="collapse-1" role="button" href="#collapse-1"> `<span class="sr-only">Gallery Image Toggle</span>`< /a>