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);
}
})
Related
I want other accordions to close when one is open. I tried using data-toggles with bootstrap but it didnt help. Here is my complete source code on Github.
<button class="accordion">Bedroom & Living Room</button>
<div class="panel">
<p>Wipe down tables and chairs.<br>
Removing dirt from carpets using high-powered vacuums.<br>
Removing garbage and debris.</p>
</div> <br>
<button class="accordion">Bathroom & Kitchen</button>
<div class="panel">
<p>Wash Dishes<br>
Clean counters<br>
Stove</p>
</div> <br>
<button class="accordion">Extra Services</button>
<div class="panel">
<p>Polished furniture.<br>
Dusting window sills and desk.<br>
Proper removal of dust and careful treatment to blinds and mini blinds.</p>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
}
}
</script>
As i said Data-toggles didnt work. Please tell me if I am doing anthing wrong. You can try to edit it in my git hub and tell me if it works.
<div id="accordion">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1"><button class="accordion">Bedroom & Living Room</button></a>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel">
<p>Wipe down tables and chairs.<br>
Removing dirt from carpets using high-powered vacuums.<br>
Removing garbage and debris.</p>
</div>
</div>
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2"><button class="accordion">Bathroom & Kitchen</button></a>
<div id="collapse2" class="panel-collapse collapse in">
<div class="panel">
<p>Wash Dishes<br>
Clean counters<br>
Stove</p>
</div>
</div>
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3"><button class="accordion">Extra Services</button></a>
<div id="collapse3" class="panel-collapse collapse in">
<div class="panel">
<p>Polished furniture.<br>
Dusting window sills and desk.<br>
Proper removal of dust and careful treatment to blinds and mini blinds.</p>
</div>
</div>
</div>
Since you're using bootstrap you may want to look at using their accordion:
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_collapsible_accordion&stacked=h
It does exactly what you want to do.
how to open a collapsible panel after button click. button is on the first page then the collapsible panel in on the second page.
here's my collapsible panel details.
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Medicine
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<form action="transaction.php" method="POST">
<div class="col-md-6">
<div class="panel panel-info">
<div class="panel-heading"><h7>Medicine Type : </h7></div>
<div class="panel-body">
<select name="selectmedicine" class="form-control col-sm-4" id="medicinename">
<option id="0" style="width:100px"></option>
this my script code - not working
<script type="text/javascript">
$('#collapseone').collapseone({
toggle: true
});
</script>
where should i put the script code on the first or second page?
code something like this.. when i click a button in page 1 i will set an item name as abc , in ur page 2 it will check whether that item name is abc , if it is abc then ur particular panel will be displayed.
page 1:
<input type="button" id="btnQueryString" onClick="submit()" value="Send" />
<script type="text/javascript">
function submit()
{
//write ur code what u want
var myvalue = "abc";
'<%Session["name"] = "' + myvalue + '"; %>';
}
page 2 :
<script type="text/javascript">
var newvalue = '<%= Session["name"] %>';
if( newvalue == abc)
{
document.getElementById('Panel1').style.display = "block";
}
else
{
document.getElementById('Panel1').style.display = "none";
}
</script>
In page1 i have written a method called submit, this method is used to send value to page2 just to notify that button is clicked, and i will call this method in button like onClick="submit".
In page2 , first i will check the session value, if button is clicked in page1 the value will be :abc: or else it will be blank. So if value is abc , i will display the panel.
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.
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.