I know in bootstrap v4 we can use e.stopPropagation(); to prevent accordion from toggling when element in header is clicked.
Like this question.
How to prevent accordion from toggling when button in header is clicked?
However, this method seems not working in Bootstrap v5.
Here is the example.
https://jsfiddle.net/8qdbjfx2/4/
Curious about how to do it?
Thanks for yours answer.
I don't know if you've solved your problem but I found one solution.
Based on that I created a simpler example:
<div class="accordion accordion-flush" id="content_accordion">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-heading-1">
<div class="d-flex align-items-center position-relative">
<button
type="button"
class="accordion-button collapsed"
data-bs-toggle="collapse"
data-bs-target="#item_1"
aria-expanded="true"
aria-controls="#item_1"
>
Title 1
</button>
<div class="header-slot">
<i class="bi bi-pencil-fill" onclick="hello()"></i>
</div>
</div>
</h2>
<div id="item_1" class="accordion-collapse collapse" aria-labelledby="flush-heading-1" data-bs-parent="#content_accordion">
<div class="accordion-body content_text">Content 1</div>
</div>
</div>
</div>
I cannot make work a semanticui sticky menu when I set a visible sidebar. There is a JSFiddle explaining the issue. The top menu glitches and does not seem to follow the scroll.
<div class="example">
<div class="ui visible inverted left vertical sidebar menu" id="left-menu">
<a class="item">Option 1</a>
</div>
<div class="pusher">
<div class="ui sticky menu" id="top-menu">
<a class="item">Menu</a>
</div>
<div style="height:3000px; background-color:red;">
Example with ui sticky menu
</div>
</div>
</div>
<script>$(function(){ $('#top-menu').sticky(); });</script>
Do you know how to fix this?
I would like to implement links in nested submenus but it doesn't seem willing to work.
<div class="ui menu">
<div class="menu">
<div class="ui pointing dropdown link item">
<i class="dropdown icon"></i>
<span class="text">Menu</span>
<div class="menu">
<div class="item">
<i class="dropdown icon"></i>
<span class="text">Sub Menu</span>
<div class="menu">
<div class="header">Links</div>
<div class="item">Google</div>
<div class="item">StackOverflow</div>
</div>
</div>
</div>
</div>
</div>
</div>
The links in the submenu will not work (though links in the menu will).
Is this a bug or a "normal" feature. Has anyone find a way around this ?
Thanks a lot.
You don't need the div in the leaf menu item - try this under the links sub menu
<a class="item" href="http://www.google.com">Google</a>
I have a single accordion item that I am using for a read more / less link on a page.
The purpose of this is to click it to read more, and a few paragraphs will follow.
I have this working, but I need it to stay closed when the page loads, at the moment the page loads with the item open.
What can I add to fix this?
<div class="accordionMod panel-group">
<div class="accordion-item">
<h4 class="accordion-toggle">Read More / Less</h4>
<section class="accordion-inner panel-body">
<p>more info.</p>
<h4 class="title">More titles</h4>
<p>more content</p>
</section>
</div>
</div>
I think this will work
<div class="accordion" id="myAccordion">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#myAccordion" href="#collapseOne">
Title
</a>
</div>
<div id="collapseOne" class="accordion-body collapse">
<div class="accordion-inner">
Content
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#myAccordion" href="#collapseTwo">
Title
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
Content
</div>
</div>
</div>
</div>
if you add the class in to accordion-body collapse it will be open by default.
Sounds like you don't need an accordion, which has multiple panels, only one of which can open at a time. Instead, just use collapse which allows you to toggle the visibility of a section of the page.
Panel Visibility
From the collapse docs:
The collapse plugin utilizes a few classes to handle the heavy lifting:
.collapse hides the content
.collapse.in shows the content
.collapsing is added when the transition starts, and removed when it finishes
Thus, to start off collapsed, just make sure your extra content has the class collapse and not in
Simple HTML
To use collapse, you really just need to specify a data-toggle="collapse" and then point the collapse to the css selector of the section you would like to toggle using data-target.
Here's a bare bones example that just exposes the collapsing functionality:
<a data-toggle="collapse" data-target="#ReadMoreInfo" href="#">
Read More / Less
</a>
<div id="ReadMoreInfo" class="collapse">
<p> More Info Here </p>
</div>
HTML with Bootstrap classes
All the other bootstrap classes are just to help make the collapsible panel look like a collapsible panel. I would recommend formatting them like this or doing a lot of custom CSS work. Even if you wanted to do the CSS yourself, starting off with this template and then overriding the styles would be best.
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse"
data-target="#ReadMoreInfo"
href="#ReadMoreInfo">
Read More / Less
</a>
</h4>
</div>
<div id="ReadMoreInfo" class="panel-collapse collapse">
<div class="panel-body">
<p>more info.</p>
<h4 class="title">More titles</h4>
<p>more content</p>
</div>
</div>
</div>
Working Demo in jsFiddle
Screenshot:
Removing the in class did not work for me in my case(though normally it should). I was just looking for the answer to this question yesterday. I used this to make the accordion default to close:
$( document ).ready(function() {
$('.collapse').collapse({
toggle: false
});
});
See also this question on:
Jquery accordion not collapse by default
if accordion is with icon, add collapsed class name to :
<a class="accordion-toggle accordion-toggle-styled collapsed" >
and add collapse class name to:
<div id="collapse0" class="panel-collaps collapse">
complete code is:
<div class="panel-group accordion" id="accordion0">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle accordion-toggle-styled collapsed" data-toggle="collapse" data-parent="#accordion0" href="#collapse0">
Collapsible Header Text
</a>
</h4>
</div>
<div id="collapse_3_1" class="panel-collaps collapse">
<div class="panel-body">
<p> body text
</p>
</div>
</div>
</div>
</div>
It's easy. In Bootstrap 5, edit your HTML to remove the "show" class from your first accordion item. See Make accordion closed by default in Bootstrap, the answer that starts "Was recently working with Bootstrap".
I'm having trouble and I am not sure on how to tackle this problem.
I have a Spry Tabbed Panels Widget with content. I know that the 3-level, 5-container structure is essential for the Tabbed Panels widget to work properly, but I would like to add one more level (the container class below the main div), like this:
<div id="TabbedPanels1" class="TabbedPanels">
<div class="content">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Home</li>
<li class="TabbedPanelsTab" tabindex="0">Profile/li>
<li class="TabbedPanelsTab" tabindex="0">Contact</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Content 1</div>
<div class="TabbedPanelsContent">Content 2</div>
<div class="TabbedPanelsContent">Content 3</div>
</div>
</div>
</div>
As far as I understand, in order to get this to work properly, I would have to modify the widget core. Can anyone point me in the right direction or help me modify the widget core?
Many thanks in advance!!
<div id="TabbedPanels1" class="TabbedPanels">
would work as
<div id="TabbedPanels1" class="TabbedPanels content">
so there is no need for another div layer...