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.
Related
I just joined forum moments ago when I got real frustrated. I've been trying to work out a problem I found but haven't been able to solve myself.
So i'm building expand/collapse style menu where I have two items (two titles). When I click one of the titles, the item and its content is being expanded. When I click it again, it gets collapsed. It's just the way I want it to work.
The problem is that 'master' button which works as "Show all" or "Hide all". It isn't working like I want it to work. So when I click it once, all items are displayed and when I click it again all items are being hidden.
The problem is when I click one of the items open and THEN click "Show all" button, then that already opened element is being hid and element being before hidden is now being shown. How to proceed from here?
My code is here:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<!-- BOOTSTRAP CORE STYLE -->
<link href="assets/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-primary">Show all</button>
<br>
<script>
$(document).ready(function(){
$(".btn-primary").click(function(){
$(".panel-collapse").collapse('toggle');
var $this = $(this);
$this.toggleClass('.btn-primary');
if($this.hasClass('.btn-primary')){
$this.text('Hide all');
} else {
$this.text('Show all');
}
});
});
</script>
<br>
<div class="container">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">First collapse</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">First content</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse2">Second collapse</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">Second content</div>
</div>
</div>
</div>
</div>
<!--CORE SCRIPTS PLUGIN-->
<script src="assets/js/jquery-1.11.1.min.js"></script>
<!--BOOTSTRAP SCRIPTS PLUGIN-->
<script src="assets/js/bootstrap.js"></script>
</body>
</html>
Please note: There are few scripts that have local paths because I couldn't get global links (hyperlinks) to work here... don't really know why.
I know everything here is pretty messed up, i'm not a native English speaker but I hope you understand what I'm struggling with.
Thanks in advance. Any help is appreciated! :)
try next code :
$(document).ready(function(){
let $button =$(".btn-primary");
$button.click(function(){
$(".panel-collapse").toggle()
var $this = $(this);
$this.toggleClass('.btn-primary');
if(!$this.hasClass('.btn-primary')){
$this.text('Hide all');
} else {
$this.text('Show all');
}
});
});
But I reccomend use custom class or id for identify buttons or others elements, because page can has many elements with similar bootstraps classes.For toogle text in button you need use variable.
Suppose there is a .NET Bootstrap form with multiple input buttons. When a User presses the Enter key, the default button value is sent to the Controller regardless of in which panel the User is modifying data. I think the code determines which panel is active and which button corresponds to that panel, but how does one send the correct panel's button value to the Controller? $closestButton.Submit(); did not work and I can't find the answer searching the questions here. Thanks in advance!
The Controller:
[HttpPost]
public ActionResult SaveData(SaveDataViewModel model, string buttonCommand)
{
if (buttonCommand == "Save Basics")
{
//Do stuff
}
else if (buttonCommand == "Save Owner")
{
//Do other stuff
}
return View();
}
The View:
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default" id="basicsPanel">
<div class="panel-heading">Basic Info</div>
<div class="panel-body">
<div class="row">
<!-- Text boxes and such -->
</div>
<div class="row">
<!-- This is the default button upon pressing Enter key, and its value is always sent to the Controller -->
<button type="submit" id="saveBasics" name="buttonCommand" class="btn btn-success pull-right" value="Save Basics">Save Basics</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-info" id="ownerPanel">
<div class="panel-heading">Owner</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-4">
<!-- Other text boxes and such -->
</div>
</div>
<div class="row">
<div class="col-lg-12 text-right">
<!-- This button should be the one used when a User presses the Enter key while filling in data in this panel -->
<button type="submit" id="saveOwner" name="buttonCommand" class="btn btn-success" value="Save Owner">Save Owner</button>
</div>
</div>
</div>
</div>
</div>
</div>
Finally, the script that detects which button was pressed, but can't set the value of "buttonCommand":
$(document).keypress(function (e) {
if (e.which == 13) {
var $activeElement = document.activeElement.id;
var $closestPanel = $($activeElement).closest('panel');
var $closestButton = $($closestPanel).children('input[type=submit]');
//Got the intended button, now how to send its value?
}
});
The answer here was: a) capture a keypress event and test whether it's the Enter key; b) if it is, call a function to prevent default behavior; c) get the active element; d) get the id attribute of the closest panel; e) check if the panel name equals one of the panel names of the page and call a .click() on that panel's button id.
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.
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);
}
})