accordion?

More
10 months 2 weeks ago #51086 by lg3raccoon
accordion? was created by lg3raccoon
Hello., I have a general question about whether it is possible to hide and show secondary text in a post, similar to the read more function, but not as a pop-up since there is too much text. I think it's called an accordion.
Thank you

Please Log in to join the conversation.

  • milos
    Support Staff
  • Moderator
  • Moderator
More
10 months 2 weeks ago #51087 by milos
Replied by milos on topic accordion?
Hello,

Yes, accordion is supported by Bootstrap (which is loaded by Joomla) and this is a sample HTML code that will display 3 accordion sections:
Code:
<div class="accordion" id="accordion1"> <div class="accordion-item"> <h2 class="accordion-header" id="heading1"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-expanded="true" aria-controls="collapse1"> Anim pariatur cliche reprehenderit? </button> </h2> <div id="collapse1" class="accordion-collapse collapse show" aria-labelledby="heading1" data-bs-parent="#accordion1"> <div class="accordion-body"> <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.</p> </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="heading2"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2" aria-expanded="false" aria-controls="collapse2"> Ut wisi enim ad minim veniam? </button> </h2> <div id="collapse2" class="accordion-collapse collapse" aria-labelledby="heading2" data-bs-parent="#accordion1"> <div class="accordion-body"> <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="heading3"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse3" aria-expanded="false" aria-controls="collapse3"> Nam liber tempor cum soluta nobis eleifend? </button> </h2> <div id="collapse3" class="accordion-collapse collapse" aria-labelledby="heading3" data-bs-parent="#accordion1"> <div class="accordion-body"> <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p> </div> </div> </div> </div>

If it's easier for you, you can install an accordion extensions, such as extensions.joomla.org/extension/tabs-accordions/

Regards,
Milos

Please Log in to join the conversation.

More
9 months 3 weeks ago #51190 by lg3raccoon
Replied by lg3raccoon on topic accordion?
Thank you for this wonderful accordion. I want the first accordion item to be collapsed like the other two. i  changed the first item accordion-button collapsed"  aria-expanded="false" . But there is no change.

Please Log in to join the conversation.

  • milos
    Support Staff
  • Moderator
  • Moderator
More
9 months 2 weeks ago #51191 by milos
Replied by milos on topic accordion?
Hello,

You should delete class "show" from DIV that has the id of "collapse1".

Regards,
Milos

Please Log in to join the conversation.

More
9 months 2 weeks ago #51192 by lg3raccoon
Replied by lg3raccoon on topic accordion?
many many thanks

Please Log in to join the conversation.

Time to create page: 0.250 seconds
Powered by Kunena Forum