How to collapse content and change glyphicon in buttons right in bootstrap? - javascript

In the lack of my javascript-skills I need some help for my very basic bootstrap problem.
That's the goal: four hidden paragraphs via collapse and a "toggle" button for each to make it visible or hidden.
That's the problem: the first collapse works fine, but the second, third and fourth glyphicon inside the buttons is changing too. And if I want to view the second, third and fourth collapsed paragraph after clicking the appropriate button it only shows the first paragraph. What happen? Is there only the one way to make this works, to include different IDs for each paragraph in the Javascript?
Live on Bootply: http://www.bootply.com/Jyf06v1aiK
<div class="col-xs-6">
<div class="collapse" id="collapseDiv">
<p class="">This is the FIRST collapsible content!</p>
</div>
<button data-toggle="collapse" data-target="#collapseDiv">
<span class="glyphicon glyphicon-large glyphicon-menu-down"></span>
</button>
</div>
<div class="col-xs-6">
<div class="collapse" id="collapseDiv">
<p class="">This is the SECOND collapsible content!</p>
</div>
<button data-toggle="collapse" data-target="#collapseDiv">
<span class="glyphicon glyphicon-large glyphicon-menu-down"></span>
</button>
</div>
<div class="col-xs-6">
<div class="collapse" id="collapseDiv">
<p class="">This is the THIRD collapsible content!</p>
</div>
<button data-toggle="collapse" data-target="#collapseDiv">
<span class="glyphicon glyphicon-large glyphicon-menu-down"></span>
</button>
</div>
<div class="col-xs-6 bg-success">
<div class="collapse" id="collapseDiv">
<p class="">This is the FOURTH collapsible content!</p>
</div>
<button data-toggle="collapse" data-target="#collapseDiv">
<span class="glyphicon glyphicon-large glyphicon-menu-down"></span>
</button>
</div>
Javascript:
$('#collapseDiv').on('shown.bs.collapse', function () {
$(".glyphicon").removeClass("glyphicon-menu-down").addClass("glyphicon-menu-up");
});
$('#collapseDiv').on('hidden.bs.collapse', function () {
$(".glyphicon").removeClass("glyphicon-menu-up").addClass("glyphicon-menu-down");
});

Take a look at my changes on your code here.
Your issue is not actually related to JS, but to concepts around the DOM.
First of all, it isn't a good idea to have the same id in multiple elements, the id attribute is supposed to be unique across the entire DOM.
Second, $('.glyphicon') refers to ALL the elements in the DOM with a class glyphicon not only the closest to your collapse div.
I'm including the code here but feel free to try it in the link above.
<div class="container">
<h1 class="">Bootstrap Collapse Buttons (WIP)</h1>
<div class="col-xs-6 bg-warning">
<div class="collapse customCollapse" id="collapseDiv">
<p class="">This is the FIRST collapsible content!</p>
</div>
<button data-toggle="collapse" data-target="#collapseDiv" class=""> <span class="glyphicon glyphicon-large glyphicon-menu-down"></span>
</button>
</div>
<div class="col-xs-6 bg-info">
<div class="collapse customCollapse" id="collapseDiv2">
<p class="">This is the SECOND collapsible content!</p>
</div>
<button data-toggle="collapse" data-target="#collapseDiv2" class=""> <span class="glyphicon glyphicon-large glyphicon-menu-down"></span>
</button>
</div>
<div class="col-xs-6 bg-danger">
<div class="collapse customCollapse" id="collapseDiv3">
<p class="">This is the FIRST collapsible content!</p>
</div>
<button data-toggle="collapse" data-target="#collapseDiv3" class=""> <span class="glyphicon glyphicon-large glyphicon-menu-down"></span>
</button>
</div>
<div class="col-xs-6 bg-success">
<div class="collapse customCollapse" id="collapseDiv4">
<p class="">This is the SECOND collapsible content!</p>
</div>
<button data-toggle="collapse" data-target="#collapseDiv4" class=""> <span class="glyphicon glyphicon-large glyphicon-menu-down"></span>
</button>
</div>
</div>
And the js
$('.customCollapse').on('shown.bs.collapse', function () {
$(this).parent().find(".glyphicon").removeClass("glyphicon-menu-down").addClass("glyphicon-menu-up");
});
$('.customCollapse').on('hidden.bs.collapse', function () {
$(this).parent().find(".glyphicon").removeClass("glyphicon-menu-up").addClass("glyphicon-menu-down");
});
EDIT
A little extra explanation: if you plan to share js logic across multiple DOM elements a good way to do it is using classes. That is why I changed your js and DOM to use .customCollapse instead of the collapseDiv id.
Note also that I changed the ids on each collapseDiv by adding a number to make it unique.

Related

Dynamically set class or id using index of ngFor loop

So I am trying to create a collapse (accordion) in Bootstrap 4 using Angular. I would love to be able to create almost the entire thing using an ngFor loop.
So far I have this:
<div class="row">
<div class="col-lg-6">
<div id="accordion" role="tablist" aria-multiselectable="true">
<div class="card" *ngFor="let environment of environments; let i = index;">
<div class="card-header" role="tab" id="headingi">
<h5 class="mb-0">
<a data-toggle="collapse" data-parent="#accordion" href="#collapsei" aria-expanded="false" aria-controls="collapsei">
Number: {{i}}
</a>
</h5>
</div>
<div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
<div class="card-block">
<div *ngFor="let name of uniqueNames; let j = index" class="card infoBox">
<p>this is accordion {{i}}, section: {{j}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
What I am trying to do is use "let i = index" to set the id and class names needed to make the accordion know what to do when certain links are clicked. So ideally the first accordion section would have class and id of collapse0/heading0 and the next would have id and class of collapse1/heading1 etc.
However, the previous code must not be working because all the accordions and their headers show up and do nothing when clicked on. It does generate the correct number, show all the right headers, and the bodies associated with them.
Any help? thanks!
You can do it this way also
id="collapse{{i}}" class="heading{{i}}" attr.aria-controls="heading{{i}}"
and the fact that aria- attributes are being handled another way in angular you have to prefix them with attr.. In your example should that be attr.aria-controls="heading{{i}}".
You just have to databind id:
<div class="card-header" role="tab" [id]="'heading'+i">
<!-- and -->
<div [id]="'collapse' + i" class="collapse show" role="tabpanel" [aria-labelledby]="'heading' + i">
And then you can access your index via i.
*Here is working code with bootstrap 5 accordion with ngFor Angular 12 (dynamic id):
<div class="accordion" id="accordionPanelsStayOpenExample">
<div class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
Installed Offer Version Details
</button>
</h2>
<div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show" aria-labelledby="panelsStayOpen-headingOne">
<div class="accordion-body">
<ng-container *ngFor="let lineItem of allLineItems">
<!-- <line-item-detail [lineItem]="lineItem"></line-item-detail>-->
<div class="accordion-item my-4">
<h2 class="accordion-header" id="heading{{lineItem.id}}">
<button class="accordion-button" type="button" data-bs-toggle="collapse" attr.data-bs-target="#collapse{{lineItem.id}}" aria-expanded="true" attr.aria-controls="collapse{{lineItem.id}}">
{{lineItem.productType}} : {{lineItem?.productOffering?.name}}
</button>
</h2>
<div id="collapse{{lineItem.id}}" class="accordion-collapse collapse show" attr.aria-labelledby="heading{{lineItem.id}}">
<div class="accordion-body">
your body text
</div>
</div>
</div>
</ng-container>
</div>
</div>
</div>
</div>
Even you can create sub-component of what is in ngFor like I commented the <line-item-detail></line-item-detail> tag.

Bootstrap panels within Thymeleaf loop - same id and href

I'm trying to generate bootstrap collapse panels within Thymeleaf loop, like that:
<table>
<tr th:each="p, iterStat : ${completedList}">
<td style="padding: 0 15px 0 15px;">
<div class="panel panel-success">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseOne" th:text="${p.key}">p.k</a>
<span style="float: right;" class="glyphicon glyphicon-ok"></span>
</h4>
</div>
<div th:id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<span th:text="${p.value}"></span>
</div>
</div>
</div>
</td>
</tr>
</table>
But I have the same id and href for every element of the loop so the panels doesn't works.
Can I do something to change dynamically id and href?
You can use the status variable (iterStat) to create a unique id for every row:
<a data-toggle="collapse" data-parent="#accordion" th:href="'#collapse' + ${iterStat.index}" th:text="${p.key}">
and
<div th:id="'collapse' + ${iterStat.index}" class="panel-collapse collapse in">
I just ran into this same issue and what I did was
<div class="accordion" id="accordionExample"
th:each="todo : ${todos}">
<div class="accordion-item">
<h2 class="accordion-header" th:id="heading + ${todo.id}">
<button class="accordion-button" type="button"
data-bs-toggle="collapse"
th:attr="data-bs-target=|#col${todo.id}" aria-expanded="true"
aria-controls="collapseOne">Accordion Item #1</button>
</h2>
<div th:id="col + ${todo.id}"
class="accordion-collapse collapse show"
th:attr="aria-labelledby=|heading${todo.id}|"
data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the first item's accordion body.</strong> It
is shown by default, until the collapse plugin adds the
appropriate classes that we use to style each element. These
classes control the overall appearance, as well as the showing
and hiding via CSS transitions. You can modify any of this
with custom CSS or overriding our default variables. It's also
worth noting that just about any HTML can go within the
<code>.accordion-body</code>
, though the transition does limit overflow.
</div>
</div>
</div>
</div>
instead of concatenating the id, just add it as a string with the th:attr, then the value should be put inside the | {dynamic value e.g id, uuid, primary key} |.
then concatenate with the + for the th:id which will automatically know its equivalent attribute as set earlier.

Jquery Target a tag in the third child of previous sibling

I'm not so great with traversing in jquery. Here is my markup:
<div class="row planarea">
<div class="col-md-6">
<h1>Agera Fixed Advantage 12</h1>
Fixed Price - 12 Months<br>
Utility: Con Edison
</div>
<div class="col-md-3">
<span class="price">$0.0799</span> <span class="killowats">/ kWh</span>
</div>
<div class="col-md-3">
<a class="nolink showmore" data-toggle="collapse" data-target="#24moscollapse" aria-expanded="false" aria-controls="24moscollapse">
<div class="selectdetails">
Details <i class="fa fa-chevron-circle-down" aria-hidden="true"></i>
</div>
</a>
<label >
<input type='radio' name="prefs" class="hidecheck" value="mail">
<span></span>
</label>
</div>
</div><!--row-->
<div class="row collapse detailsrow" id="24moscollapse">
<div class="col-xs-12 plandetailsbox">
stuff
</div>
</div>
what I want to do is something similar to this:
$('.detailsrow').on('show.bs.collapse', function () {
$(this).prev().closest().("a.showmore").html('<div class="selectdetails">Details <i class="fa fa-chevron-circle-up" aria- hidden="true"></i></div>');
})
I can't seem to figure out how to target that a tag and it's getting kind of confusing. I need to target what I believe is the a tag in the third child of the previous sibling for every repeated row of this information. Any help would be appreciated.
closest() finds the first parent. And closest(selector) finds the first selector matched parent.
Whereas, you are looking for a child. So, you can use find(selector).
Change this:
$(this).prev().closest().("a.showmore")
To this:
$(this).prev().find("a.showmore")

how do i display long text after click read more button with shorted text?

I'm using an accordion panel for long comments in my blog. Now I want to add long text to short text and show the full text with this, but I have a problem. If I click the show button, it shows at a newline.
jsfiddle snippet
<div class="panel-group" id="accordion">
<div class="panel panel-default text-left" >
<div>
<div style="color:#000;" class="panel-body text-left"><br>This is short comment for my stack...</div>
</div>
</div>
<div class="panel" >
<div id="collapse2" class="clearfix panel-collapse collapse">
<div class="panel-body" style="color:#000;">overflow post and i hope i can find a good solution for this
</div>
</div>
<div class="panel-heading">'.
<h5><a class="btn btn-block" data-toggle="collapse" data-parent="#accordion" href="#collapse2">Show/Hide</a>
</h5>
</div>
</div>
</div>
I want to add another part to short text without newline.
Add the second part of your text in a span and hide it, then reveal it with JS:
function showMore()
{
if ($('#threedots').css('display')=='none')
{
//already showing, we hide
$('#threedots').show();
$('#full_desc').hide();
}
else
{
//show more
$('#threedots').hide();
$('#full_desc').show();
}
}//end function
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div style="color:#000;" class="panel-body text-left"><br>This is short comment for my stack<span id="threedots">...</span><span id="full_desc" style="display:none">overflow post and i hope i can find a good solution for this</span></div>
<a class="btn btn-block" data-toggle="collapse" data-parent="#accordion" onclick="showMore()">Show/Hide</a>

toggling buttons and panels using twitter bootstrap

I have three buttons and each triggers showing a corresponding panel. I would like to only show one panel at a time, but right now a panel is shown per button clicked. So clicking all three buttons shows three panels at the same time.
I am using twitter bootstrap, and this is my code:
<span data-toggle="buttons-radio">
<a class="btn btn-sm btn-white pull-right m-r" data-toggle="class:show" href="#content1"><i class="icon-sitemap"></i> Content1</a>
<a class="btn btn-sm btn-white pull-right m-r" data-toggle="class:show" href="#content2"><i class="icon-user"></i> Content2</a>
<a class="btn btn-sm btn-primary pull-right m-r" data-toggle="class:show" href="#content3"><i class="icon-male"></i><i class="icon-female"></i> Content3</a>
</span>
<aside class="bg-white hide col-lg-6 b-l" id="content1">
<div>
<h2>This is content 1</h2>
</div>
</aside>
<aside class="bg-white hide col-lg-6 b-l" id="content2">
<div>
<h2>This is content 2</h2>
</div>
</aside>
<aside class="bg-white hide col-lg-6 b-l" id="content3">
<div>
<h2>This is content 3</h2>
</div>
</aside>
thanks
Thomas
In bootstrap, tabs work that way:
http://getbootstrap.com/javascript/#tabs
The tabs titles show up across the top and clicking them shows different content. Two tabs are never shown at once.
Try wrapping it in a .btn-group to your span.
<span class="btn-group">
//your buttons
</span>

Categories