Hello i have the following issue while using a bootstrap toggle.
Code as follow
(I copied the wrong section of HTML code so i edited the question this is the actual code wich is being applied to toggle)
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title active">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Electronics <span class="more">+</span></a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>Item 1 (2)</li>
<li>Item 2 (1)</li>
<li>Item 3 (3)</li>
</ul>
</div>
</div>
</div><!-- panel 1-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Cartridges <span class="more">+</span></a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>Item 1 (2)</li>
<li>Item 2 (1)</li>
<li>Item 3 (3)</li>
</ul>
</div>
</div>
</div><!-- panel 2-->
</div><!-- panel group -->
And this is what i'm using to replace the text
$('.more').click(function(){
$(this).text(function(i,old){
return old=='+' ? '-' : '+';
});
});
So i wanted to change the text of div class=more to minus(-) when the element it's clicked
on this thread i found the answer Twitter bootstrap collapse: change display of toggle button
However as i have multiple items, when i click on one of them, the sign changes to (-) that works flawlessly, but if i click on another "item" the first one collapses but the sign remains (-) instead of changing to (+)
How can i do it? i know it's a simple question and maybe a simple answer but i'm kinda stuck in here.
Thanks for your help
In my opinion you should be hooking in to the native Bootstrap events :
$('.dropdown').on({
'show.bs.dropdown': function () {
var l = $('.more', this).html('-')
$('.more').not(l).html('+')
},
'hidden.bs.dropdown': function () {
$('.more', this).html('+')
}
});
FIDDLE
Along with updating current more element, you need to update all other more elements to +
var $mores = $('.more').click(function () {
$(this).text(function (i, old) {
return old == '+' ? '-' : '+';
});
//update all other more text to -
$mores.not(this).text('+');
});
Demo: Fiddle
Try:
$('.more').click(function(){
var txt = $(this).text();
if(txt == "+"){
$('.more').text("+");
$(this).text("-");
}
else{
$(this).text("+");
}
});
DEMO here.
Related
I have this menu in this fiddle and I want to set active div on click:
<div class="account-item">
<div class="account-heading active">
<h4 class="account-title">
2. TRANSACTION_HISTORY
</h4>
</div>
</div>
I have this script but i get selected all divs
function SetActiveDiv()
{
var element = $("a").parent().parent();
if (element.hasClass("active")) {
element.removeClass("active");
} else {
element.addClass("active");
}
}
You need to pass the clicked element reference
1.MY_TICKETS
then
function SetActiveDiv(el) {
var element = $(el).closest('.account-heading');
element.toggleClass("active");
}
Demo: Fiddle
Note: Since you are using jQuery, try to use jQuery event handlers instead of inline handlers
So
1.MY_TICKETS
then
jQuery(function ($) {
$('.account-group .account-title a').click(function () {
var $heading = $(this).closest('.account-heading').toggleClass("active");
$('.account-group .account-heading.active').not($heading).removeClass('active');
})
})
Demo: Fiddle
just make the selector to look like (double class selector):
var element = $(".account-heading.active");
You need to take a look at your code and understand what it is doing. Take the following line:
$("a").parent().parent();
What does this do? It selects every anchor, then selects the parent, then selects the parent of that parent.
Considering you're using jQuery, you can use it to bind the event handler instead of using onClick in your html (which is considering bad practice).
$('a').on('click', function() {
$('.account-heading').removeClass('active');
$(this).parent().parent().addClass('active');
});
jsFiddle: http://fiddle.jshell.net/jxmbj36s/5/
Remove all the functions in html onclick="SetActiveLink('#/*')" and then use this jQuery function so you will not be repetitive:
$(".account-group a").on("click", function(){
$(".account-group a").removeClass("active");
$(this).addClass("active");
});
See the result here:
$(".account-group a").on("click", function(){
$(".account-group a").removeClass("active");
$(this).addClass("active");
});
.active {
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-2 col-md-3 left-sidebar-container">
<div class="left-sidebar">
<div class="account">
<h1>MY_ACCOUNT</h1>
<div class="account-group" id="accordion">
<div class="account-item">
<div class="account-heading">
<h4 class="account-title">
1.MY_TICKETS
</h4>
</div>
</div>
<div class="account-item">
<div class="account-heading">
<h4 class="account-title">
2. TRANSACTION_HISTORY
</h4>
</div>
</div>
<div class="account-item">
<div class="account-heading">
<h4 class="account-title">
3. PAYIN
</h4>
</div>
</div>
<div class="account-item">
<div class="account-heading">
<h4 class="account-title">
4.PAYOUT
</h4>
</div>
</div>
<div class="account-item">
<div class="account-heading active">
<h4 class="account-title has-sub">
<a data-toggle="collapse" data-parent="#accordion" href="#settings">5.SETTINGS</a>
</h4>
</div>
<div id="settings" class="account-collapse collapse in">
<div class="account-body">
PERSONAL_INFORMATION
NOTIFICATIONS
CHANGE_PASSWORD
GAME_SETTINGS
</div>
</div>
</div>
<div class="account-item">
<div class="account-heading">
<h4 class="account-title has-sub">
<a data-toggle="collapse" data-parent="#accordion" href="#promotions">6.PROMOTIONS</a>
</h4>
</div>
<div id="promotions" class="account-collapse collapse">
<div class="account-body">
BONUSES
COMPETITIONS
VOUCHER_REDEEM
</div>
</div>
</div>
<div class="account-item">
<div class="account-heading">
<h4 class="account-title">
7. SYSTEM_MESSAGES
</h4>
</div>
</div>
</div>
</div>
</div>
</div>
I think that the following code will help you to solve this problem
function SetActiveDiv() {
var el = $("a").closest("div.account-heading")[0];
var el = $("a").parent().parent();
if ($(el).hasClass('active')) {
$(el).removeClass('active')
} else {
$(el).addClass('active')
}
}
I know that this has been asked several times but I cannot get any of the answers to work in my code.
I am using Bootstrap 3 panels and collapse to show adverts. In the basic view, only the advert heading is shown together with a chevron down glyph to indicate that there is more information.
When the user clicks on the chevron-down, the main panel body containing the advert text is shown. At this point, I would like the chevron-down glyph to change to a chevron-up glyp.
I am using the following code:
<script language="JavaScript" type="text/javascript">
$('#Advert').on('show.bs.collapse', function(){
$('#Glyp-Advert').removeclass('glyphicon glyphicon-chevron-down').addclass('glyphicon glyphicon-chevron-up');
});
$('#Advert').on('hide.bs.collapse', function() {
$('#Glyp-Advert').removeclass('glyphicon glyphicon-chevron-up').addclass('glyphicon glyphicon-chevron-down');
});
</script>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a id="Heading-Advert" data-toggle="collapse" data-parent="#accordion" href="#Advert">
Heading
<span class="pull-right"><span id="Glyp-Advert" class="glyphicon glyphicon-chevron-down"></span></span>
</a>
</h4>
</div>
<div id="Advert" class="panel-collapse collapse">
<div class="panel-body">
Advert text<br />
</div>
</div>
</div>
This succeeds in displaying the main advert panel but will not change the glyph.
Any help would be appreciated. Note that the page will contain several adverts; so I intend to repeat the above code several times on the page but change the id's to contain the word 'Advert1' or 'Advert2' etc instead of just 'Advert'.
JavaScript is case-sensitive.
As such, your calls to removeclass and addclass are invalid because removeClass and addClass are the actual method names (notice the capital 'C' in each name).
Your code works otherwise. See http://jsfiddle.net/wilsonjonash/SXYZ2/
The answer from Jonathan Wilson was spot on BUT it failed to mention that the script needs to be AFTER the html and not before in my sample code.
Therefore, the correct code should be
<div class="panel panel-default"><div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a id="Heading-Advert" data-toggle="collapse" data-parent="#accordion" href="#Advert">
<span class="pull-right"><span id="Glyp-Advert" class="glyphicon glyphicon-chevron-down"></span></span>
Heading
</a>
</h4>
</div>
<div id="Advert" class="panel-collapse collapse">
<div class="panel-body">
Advert text<br />
</div>
</div>
</div>
<script language="JavaScript" type="text/javascript">
$('#Advert').on('show.bs.collapse', function(){
$('#Glyp-Advert').removeClass('glyphicon glyphicon-chevron-down').addClass('glyphicon glyphicon-chevron-up');
});
$('#Advert').on('hide.bs.collapse', function() {
$('#Glyp-Advert').removeClass('glyphicon glyphicon-chevron-up').addClass('glyphicon glyphicon-chevron-down');
});
</script>
You don't necessarily need Javascript. You can do this with a few CSS styles. Here's how I've done it.
Make sure all your panel-title a links have this class: accordion-toggle
Add this CSS to your style sheet:
.
/* symbol for open panels */
.panel-heading .accordion-toggle:after {
font-family: 'FontAwesome';
content: "\f068";
float: right;
color: #474747;
}
/* symbol for closed panels */
.panel-heading .accordion-toggle.collapsed:after {
content: "\f067";
}
Note, I've used FontAwesome here, but you can change the font and characters to whatever you need, such as up and down chevrons.
I use a number of Twitter Bootstrap collapse groups on my page. Each group may contain several anchors:
<div class="accordion" id="accordion">
<div class="accordion-group">
<div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Section 1</a>
</div>
<div id="collapseOne" class="accordion-body collapse">
<div class="accordion-inner">
<p>Section 1 - Text 1</p>
<p>Section 1 - Text 2</p>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Section 2</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
<p>Section 2 - Text 1</p>
<p>Section 2 - Text 2</p>
</div>
</div>
</div>
</div>
If my page is opened with particular hash in the URL (like http://example.com#section2-text2), then according collapse should shown. I am planning to use window.location.hash to understand which collapse to show (jsfiddle):
var hash = window.location.hash;
if (hash == '#collapseOne' || hash == '#collapseTwo') {
$(hash).collapse('show');
}
But I have two questions:
how to identify proper collapse to show if hash doesn't contain it is name (for ex., anchor and hash are somethingelse-text2, i.e. doesn't contain section2); how to find parent collapse element of the anchor somethingelse-text2?
should I scroll manually to the anchor after collapse showing?
For the first part of your question you can use something like this:
var hash = window.location.hash;
if(hash){
var targetAnchor = $(hash + ",a[href='"+hash+"']");
if(targetAnchor.length > 0){
targetAnchor.closest(".collapse").collapse('show');
}
}
For the second part, browsers usually do this natively, but in your case i'm pretty sure its not going to happen because the anchor is hidden inside your collapse block. If so, you can scroll manually like this:
$('html, body').animate({
scrollTop: targetAnchor.offset().top
}, 2000);
Based on this answer.
I am looking for some jQuery that will flip my arrow icon from down to up based on the position of the collapsed state.
<div class="panel panel-default">
<div class="panel-heading customize">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#personnel-menu" href="#personnel">
Personnel
<span class="pull-right"><i class="fa fa-angle-down"></i></span>
</a>
</h4>
</div>
<div id="personnel" class="panel-collapse collapse">
<div class="panel-body">
<ul class="list-unstyled stripped">
<li>Users</li>
</ul>
</div>
</div>
</div>
When in "open" position, this line <div id="personnel" class="panel-collapse collapse"> will change to <div id="personnel" class="panel-collapse collapse in">. Adds "in".
While in this position, with "in" <div id="personnel" class="panel-collapse collapse in"> I would like to take the line <span class="pull-right"><i class="fa fa-angle-down"></i></span> (a few lines above the former) and change the class fa-angle-down to fa-angle-up.
How can I achieve this?
Thanks.
From your example, I assume you're using Bootstrap's Collapse plugin with Font Awesome.
If it's the case, perhaps you could try hooking into the Collapse's shown.bs.collapse and hidden.bs.collapse events and do your manipulation (flipping the arrow icon) there.
For example:
$('#personnel-menu').on('hidden.bs.collapse', function (event) {
var arrow = $('#' + event.target.id).parent().find('i');
arrow.removeClass('fa-angle-down');
arrow.addClass('fa-angle-up');
}).on('shown.bs.collapse', function (event) {
var arrow = $('#' + event.target.id).parent().find('i');
arrow.removeClass('fa-angle-up');
arrow.addClass('fa-angle-down');
});
Live Demo: http://jsfiddle.net/pUam7/show/ (source)
The code to do this is fairly straight forward:
var elem = $("#personnel");
if (elem.hasClass("in")) {
elem.parents(".panel").first().find(".fa-angle-down")
.removeClass("fa-angle-down")
.addClass("fa-angle-up");
}
else {
elem.parents(".panel").first().find(".fa-angle-up")
.removeClass("fa-angle-up")
.addClass("fa-angle-down");
}
You would trigger this code whenever you want to add the "in" class to the $("#personel") object.
However, if you're going to be adding the class anyway, IMO a better way to do it would be to add the class to the $(".panel") div - then CSS will take care of the changes for you, eg:
.panel .panel-heading .panel-title a i.fa {
background-color: red;
}
.panel.in .panel-heading .panel-title a i.fa {
background-color: blue;
}
Even if you do want to use javascript, then, IMO it's best to add the code to change the class (from fa-angle-down to fa-angle-up and vice-versa) on whatever event/in whatever function call you are using to add the "in" class to the $("#personnel") object.
I am taking bootstrap3's collapse tools. http://getbootstrap.com/javascript/#collapse
but I want that if all closed, the first div should open again, so that no spare space will be there if all are closed.
this is what i tried, but this is working only once and for the second time, it is not opening the first. any ideas why?
$(function(){
$('#four').on('click', function () {
var four_class = $('#collapseFour').attr("class");
if(four_class=="panel-collapse in"){
$('#collapseOne').collapse();
}
});
});
my fourth content
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle lead" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" id="four">
Locations eintragen
</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">
fourth content
</div>
</div>
</div>
You need to watch the hidden.bs.collapse event which is broadcast when a panel has closed.
In there you check if the number of panels is equal to the number of closed panels and if so open the first one..
$('#accordion').on('hidden.bs.collapse', function (item) {
// after closing check if any is still open
var self = $(this),
collapsed = self.find('.collapsed'),
all = self.find('.panel-title'),
allClosed = collapsed.length === all.length;
if (allClosed){
setTimeout(function(){
self.find('.panel-collapse').first().collapse('show');
}, 10);
}
})