- Posts: 49
- Thank you received: 0
accordion?
-
lg3raccoon
Inactive member - Topic Author
- Member
Less
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
Thank you
Please Log in to join the conversation.
-
milos
Support Staff - Moderator
Less
More
- Posts: 6742
- Thank you received: 715
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:
If it's easier for you, you can install an accordion extensions, such as extensions.joomla.org/extension/tabs-accordions/
Regards,
Milos
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.
-
lg3raccoon
Inactive member - Topic Author
- Member
Less
More
- Posts: 49
- Thank you received: 0
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
Less
More
- Posts: 6742
- Thank you received: 715
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
You should delete class "show" from DIV that has the id of "collapse1".
Regards,
Milos
Please Log in to join the conversation.
-
lg3raccoon
Inactive member - Topic Author
- Member
Less
More
- Posts: 49
- Thank you received: 0
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