Everytime I clicked on the "collapse" button, it worked but after its refreshed, it doesn't save its state. For example when I collapse a panel and refresh the page, then the panel is left open.
P.S the {$forum['fid']} represents a forum number, which is automatically generated through templates
HTML
<div class="panel panel-default" id="forum">
<div class="panel-heading"><h3 class="panel-title">{$forum['name']}</h3><span class="pull-right">Toggle</span></div>
<div id="forumlist{$forum['fid']}" class="panel-collapse collapse in">
<div class="panel-body panel-default">
<div class="panel panel-default" style="margin-bottom: 0px;border:1px solid #2b2b2b;">
<table class="table table-hover">
<tbody>
{$sub_forums}
</tbody>
</table>
</div>
</div>
</div>
</div>
JS
$(document).ready(function () {
//when a group is shown, save it as the active accordion group
$("#forum").on('shown.bs.collapse', function () {
var active = $("#forum .in").attr('id');
$.cookie('activeForumGroup', active);
// alert(active);
});
$("#forum").on('hidden.bs.collapse', function () {
$.removeCookie('activeForumGroup');
});
var last = $.cookie('activeForumGroup');
if (last != null) {
//remove default collapse settings
$("#forum .panel-collapse").removeClass('in');
//show the account_last visible group
$("#" + last).addClass("in");
}
});
This may be missing
<div class="panel-group" id="forum">
<div class="panel panel-default">
changing the ID of each other
Related
I'm using a combination of Jquery and Bootstrap. I'm trying to target only visible panels. If I get rid of the first line, of code, the function work, but targets all panels in my HTML, which I don't want. If I keep the first line of code, the function doesn't carry through at all.
$(".panel:visible").each(function(){
$("#1star").on("click", function() {
$(".5star").show();
$(".4star").show();
$(".3star").show();
$(".2star").show();
$(".1star").show();
});
And yes, I'm sure there's an easier way to do this, but I'm confined to html, css, and jQuery.
:::edit:: html requested.
div class="panel panel-default pa 5star">
<div class="panel-body">
Pa hotel 5 star
</div>
</div>
<div class="panel panel-default pa 4star">
<div class="panel-body">
pa hotel 4 star
</div>
</div>
<div class="panel panel-default pa 3star">
<div class="panel-body">
pa hotel 3 star
</div>
</div>
<div class="panel panel-default pa 2star">
<div class="panel-body">
pa hotel 2 star
</div>
</div>
<div class="panel panel-default pa 1star">
<div class="panel-body">
pa hotel 1 star
</div>
</div>
::edit 2:::
the reason all the panels are hidden is because 1.They are by default and two this other piece of Jq
if (acceptNJ[stateSearch.toLowerCase()]) {
$(".nj").fadeIn(2000);
$(".pa").hide();
$(".ny").hide();
We're missing some of your HTML to get the full picture. It appears though you have a filter capability and you want to display the panels at or above the minimum star value for the selected state.
Here is a rough example: https://jsfiddle.net/rfh62c45/
// hide all panels
$('.panel').hide();
var visibleState = $('#state :selected').text();
var iStar = $('#star :selected').text();
while (iStar <= 5) {
$('.' + visibleState + '.' + iStar + 'star').fadeIn(2000);
iStar++;
}
You can get visibility state with
$(".4star").is(":visible")
with jquery. This returns true or false.
true = visible ,
false = hidden
Hope this helps.
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 need to handle panel collapse behavior without using ID or data attributes. Ideally by setting a "collapsible" class on the parent div that can collapse its content, and a click on the heading should trigger the collapse
Here's the target HTML I'd like to write to handle collapse behavior automatically
<div class="panel-group collapse-all-but-one">
<div class="panel panel-primary panel-collapsible>
<div class="panel-heading">Click me to collapse</div>
<div class="panel-body">I will collaaaaaaapse</div>
</div>
<div class="panel panel-warning panel-collapsible">
<div class="panel-heading">Hey another one</div>
<div class="panel-body">I will close when the other one opens</div>
</div>
</div>
Here's my magic piece of code (the ready stuff ensures compatibility with rails/angularJS)
var ready
ready = function(){
$(".panel-collapsable")
.children(".panel-heading")
.click(function(){
var group = $(this).parent().parent()
if (group.hasClass("panel-group one-at-a-time")){
group.children(".panel").children(".panel-body")
.collapse('hide')
}
$(this)
.next('.panel-body')
.collapse('toggle')
})
}
$(document).ready(ready);
$(document).on('page:load', ready);
Remember to add some bootstrap classes like .collapse .in or .collapsed to initialize correct behaviour or the first click isn't going to do anything.
<div class="panel-body collapse in">I am expanded on page load</div>
...
<div class="panel-body collapse">I am collapsed on page load</div>
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.
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);
}
})