So firstly I will admit I am a kook and have no understanding of javascript, I've jumped onto w3schools and tried to learn how to adjust the following however I have failed miserably. I understand that the solution to this question will not benifit the masses but it will sure help me, grateful for any advise.
The following script will animate the first panel-heading in an accordion list to the top of the webpage. I am however nesting many accordions inside one another (can see example here) so as you click deeper into the hierarchy the html will animate and the open accordion will be off screen at the bottom.
I need to specify the panel-heading of the opening panel-title and have that animate to the top instead of the previous or parent like what is happening now.
So I believe I need to change prev('.panel-heading'); into current panel-heading somehow??
The script
$(".panel-group").on("shown.bs.collapse", function () {
var myEl = $(this).find('.collapse').prev('.panel-heading');
$('html, body').animate({
scrollTop: $(myEl).offset().top
}, 500);
});
<!-- ACCORDION-->
<div id="accordion" class="panel-group">
<div class="panel panel-default">
<div id="heading" class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="false">Panel Title 1</a></h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">Another accordion here and inside those panels are more accordions</div>
</div>
</div>
<div class="panel panel-default">
<div id="heading" class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false" class="collapsed">Panel Title 2</a></h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">Another accordion here</div>
</div>
</div>
<div class="panel panel-default">
<div id="heading" class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapse3" aria-expanded="false" class="collapsed">Panel Title 3</a></h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">Another accordion here</div>
</div>
</div>
</div>
<!-- END ACCORDION-->
Related
I have a base document in which I am changing the content of tags with ajax.
I don't know much about javascript. I mainly copied my javascript from w3schools example, because it did exactly what I wanted.
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title p-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1" onclick="loadDoc()"><b>1.1</b> Kräfte und Momente in der Ebene</a>
</h3>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
<center>
<div id="f11">
A
</div>
</center>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title p-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2" onclick="loadDoc()"><b>1.2</b> Irgendwas anderes</a>
</h3>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<center>
<div id="f12">
A
</div>
</center>
</div>
</div>
</div>
In ths code I am replacing the content of the div tags id="11" and id="12" with a carusel from an external .php file. With the following script.
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("f11").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "car/c1.1.php", true);
xhttp.send();
}
</script>
When having only one script, it works, but when adding a second one, in which I only change f11 to f12 and car/c1.1.php to car/c1.2.php, only one of them works.
How can I get it to work, so that no matter which part of the accordeon I unfold it loads the .php part into the site?
Followup: On the final page there would be about 23 unfoldable parts, which by the current state would all require an unique script. Is this going to work?
If there is a different solution to load specific markup into the page, when unfolding I would be glad to find out about it!
Thanks in advance!
I would make the function reusable, by passing in arguments:
function loadDoc(target, endpoint) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById(target).innerHTML =
this.responseText;
}
};
xhttp.open("GET", endpoint, true);
xhttp.send();
}
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title p-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1" onclick="loadDoc('f11','https://httpbin.org/get?f11=true')"><b>1.1</b> Kräfte und Momente in der Ebene</a>
</h3>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
<center>
<div id="f11">
A
</div>
</center>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title p-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2" onclick="loadDoc('f12','https://httpbin.org/get?f12=true')"><b>1.2</b> Irgendwas anderes</a>
</h3>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<center>
<div id="f12">
A
</div>
</center>
</div>
</div>
</div>
I tried to incorporate solutions from experts all over but I still cannot get my columns to open when I hover the mouse over the panel.
What I'd like to achieve is:
When the mouse is moved to any panel area (it does not have to be over the actual anchor text), the panel body automatically opens (and subsequently all other panels close which the code already does).
When the mouse leaves the panel area the panel body automatically collapses.
Please review my code and let me know what I am doing wrong. Thank you very much for your time!
<div class="container">
<div class="row">
<div class="panel-group" id="Heyaccordion">
<div class="panel panel-default col-lg-2">
<div class="panel-heading">
<h4 class="panel-title">
Box 1 </h4>
</div>
<div class="panel-collapse collapse" id="collapseTopOneMore">
<div class="panel-body">
Boxy 1 body
</div>
</div>
</div>
<div class="panel panel-default col-lg-2">
<div class="panel-heading">
<h4 class="panel-title">
Box 2</h4>
</div>
<div class="panel-collapse collapse" id="collapseTopTwoMore">
<div class="panel-body">
Box 2 body
</div>
</div>
</div>
<div class="panel panel-default col-lg-2">
<div class="panel-heading">
<h4 class="panel-title">
Box 3 </h4>
</div>
<div class="panel-collapse collapse" id="collapseTopThreeMore">
<div class="panel-body">
Box 3 body
</div>
</div>
</div>
</div>
</div>
In jscript
$(".panel-heading").mouseenter(function () {
$(".panel-collapse").fadeIn();
});
$(".panel-collapse").mouseleave(function(){
$(".panel-collapse").fadeOut();
});
Oh, I did this
.panel-title > a {
width: 100%;
display: block;
}
and the whole panel is clickable... but it still requires a click.
I am not 100% sure of what class to give the one you don't want to collapse (e.g expanded?) But this should remove the 'collapsed' class from the only the one that raised the event:
$(".panel-heading").mouseenter(function () {
$(this).click();
});
$(".panel-collapse").mouseleave(function(){
$(this).click();
});
Hope this will work for you.
Live version here:
http://www.bootply.com/7aYZsAKgSy
I have two of these on my page that want them to collapse or expand independent of each other , I do not want one of them to have affect on status of other ones.
So I have something like this:
<div class="container">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#PANEL1">
<span class="glyphicon glyphicon-chevron-down"></span>
PANEL 1
</a>
</h4>
</div>
<div id="PANEL1" class="panel-collapse collapse in">
<div>
THERE IS A FORM HERE THAT IS THE STUFF IN THIS PANEL
</div>
</div>
</div>
</div>
</div>
and then one more under it, very similar copy paste, just the ID of inner DIV is different:
I have two of these on my page that want them to collapse or expand independent of each other , I do not want one of them to have affect on status of other ones.
So I have something like this:
<div class="container">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#PANEL2">
<span class="glyphicon glyphicon-chevron-down"></span>
PANEL 1
</a>
</h4>
</div>
<div id="PANEL2" class="panel-collapse collapse in">
<div>
THERE IS another FORM HERE THAT IS THE STUFF IN THIS PANEL
</div>
</div>
</div>
</div>
</div>
and then my JavaScript that is this:
$('.collapse').on('shown.bs.collapse', function () {
$(this).parent().find(".glyphicon-chevron-up").removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
}).on('hidden.bs.collapse', function () {
$(this).parent().find(".glyphicon-chevron-down").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
});
So sometimes it works, sometimes it does not. When both of them are open and I first close the second one, it also closes the first one.
Is that what you want?
http://www.bootply.com/MiQbLj7uIA
I just changed the id of the second accordion and its data-parent value.
I have an accordion to hide blog posts in a webpage. I have a downwards arrow which I want to rotate to an upwards arrow when a blog post (accordion section) has been opened. These should be independent of other arrows attached to other posts obviously.
I am using bootstrap framework as a base. I tried following the instructions here http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_collapse_togglebtn&stacked=h , along with what I already know/have used to try to add rotation. My problem is that, as I'm not using a button (the whole blog post is clickable to expand and collapse it), I can't work out what I need to put in the javascript where the question marks are.
(adding a data-target attribute to the tag breaks the expandability of the post).
$(" ??? ").on("hide.bs.collapse", function(){
$('.expand-image.text-center.glyphicon.glyphicon-chevron-down').addClass('turn-arrow');
});
$(" ??? ").on("show.bs.collapse", function(){
$('.expand-image.text-center.glyphicon.glyphicon-chevron-down').removeClass('turn-arrow');
});
expand-image.text-center.glyphicon.glyphicon-chevron-down.turn-arrow {
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<a class="blog" data-toggle="collapse" data-parent="#accordion"
href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<div class="panel">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<div class="row">
<div class="container col-md-12 heading-container">
<div class="col-md-1 col-sm-2 text-center">
<h3 class="date-text">Jun 25th</h3>
</div>
<div class="col-md-11 col-sm-10">
<h3>This is where the post title goes</h3>
</div>
</div>
</div>
</h4>
</div>
<div class="panel-teaser panel-body" >
<div class="row">
<div class="col-md-1">
</div>
<div class="container col-md-11">
This is where the description goes
This should be the blog post's first paragraph (which needs to be catchy, no images here though)
</div>
</div>
</div>
<div id="collapseOne" class="panel-collapse collapse in"
role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<div class="row">
<div class="col-md-1">
</div>
<div class="container col-md-11">
This is where the main text body goes.
This should be the rest of the blog post, images and all)
</div>
</div>
</div>
</div>
<span class="expand-image text-center glyphicon glyphicon-chevron-down"></span>
<hr>
</div>
</a>
<a class="blog collapsed" data-toggle="collapse" data-parent="#accordion"
href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<div class="panel">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<div class="row">
<div class="container col-md-12 heading-container">
<div class="col-md-1 col-sm-2 text-center">
<h3 class="date-text">Jun 26th</h3>
</div>
<div class="col-md-11 col-sm-10">
<h3>This is where the post title goes</h3>
</div>
</div>
</div>
</h4>
</div>
<div class="panel-teaser panel-body">
<div class="row">
<div class="col-md-1">
</div>
<div class="container col-md-11">
This is where the description goes. This should be the blog post's first paragraph (which needs to be catchy, no images here though)
</div>
</div>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<div class="row">
<div class="col-md-1">
</div>
<div class="container col-md-11">
This is where the main text body goes.
This should be the rest of the blog post, images and all)
</div>
</div>
</div>
</div>
<span class="expand-image text-center glyphicon glyphicon-chevron-down"></span>
<hr>
</div>
</a>
</div>
You can attach the eventHandler on any Element, that is one of the parent Elements of .collapse. This is because the Event is triggered on the .collapse Element and bubbles all the way uppward. You can read more about event bubbling here.
You could, for example, attach the eventHandler to every Element with class "blog" as I did to solve your problem.
Relevant jsFiddle
$(".blog").each(function () {
$(this).on("hide.bs.collapse", function () {
$(this).find('.expand-image.text-center.glyphicon.glyphicon-chevron-down').removeClass('turn-arrow');
});
$(this).on("show.bs.collapse", function () {
$(this).find('.expand-image.text-center.glyphicon.glyphicon-chevron-down').addClass('turn-arrow');
});
});
Note the .each at the beginning. This attaches a different eventHandler to every Element matching the selector.
Now you can search the icon to be rotated in this Element --> $(this).find(
This will only find the one arrow inside the clicked blog element.
A very detailed explanation can also be found in this post.
I have 5 accordions and data under each accordion but wat i need is that the all the accordion has to be closed first and when i click the accordion then i need it to be opened.
<div class="panel panel-default" style=" background: rgba(0,0,0,0.1)">
<div class="panel-heading" style="background:rgba(0,0,0,0.7);">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
<h4 class="panel-title">SUPPLIERS <b class="closed"></b>
</h4>
</a>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<p class="title"> > BP</p>
<p class="title"> > CHEVERON </p>
<p class="title"> > CITGO </p>
<p class="title"> > EXOON </p>
</div>
</div>
This is the code sample for the first accordion is there anyway to close the first accordion and open it only on click?
Your need to remove class in from accordion collapse..
<div id="collapse1" class="accordion-body collapse">