I'm working on creating a accordion that collapses/opens when the user hover's their mouse over the title of the accordion. The code I have so far works to some degree. The problem is that the accordion always opens when the mouse enters but is sometimes really inconsistent in closing (especially if the user moves their mouse very fast).
Here is a link to the website http://infotree.co.uk/ (the accordion is on the left) to visualize the problem - move mouse fast over the left accordion.
And here is my code for just one of the accordion tabs in the html doc:
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title accordionTitles1" id="headOne1"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne1">Search</a></h4>
</div>
<div id="collapseOne1" class="panel-collapse collapse in">
<div class="panel-body">Search to find specific content to learn about.</div>
</div>
</div>
And the java script to go with it:
$(document).ready(function() {
$("#headOne1").hover(function() {
$('#collapseOne1').collapse('show');
}, function() {
$('#collapseOne1').collapse('hide');
}
);
});
Going through the previous accordion question you mentioned (Bootstrap Collapse accordion on hover) I found one person's answer relating to the problem I was having which made me realize the exact cause.
The problem is to do with the animation timing, so if you leave the collapse area BEFORE the collapse animation is finish jquery never runs the collapse function. The solution is to use queue and dequeue methods to make sure all the functions run properly and in the correct order.
Here is the HTML code for one tab:
<div class="panel panel-default">
Search
<div id="sidebarContent1" class="panel-collapse collapse">
<div class="panel-body">Search to find specific content to learn about.</div>
</div>
</div>
And the java script for the respective tab:
$(document).ready(function() {
var button1 = $("#sidebarButton1");
var content1 = $("#sidebarContent1");
button1.mouseenter(function() {
content1.queue('collapsequeue',function(){
content1.collapse('show');
});
if (!content1.hasClass("collapsing")) {
content1.dequeue("collapsequeue");
}
});
button1.mouseleave(function() {
content1.queue('collapsequeue',function(){
content1.collapse('hide');
});
if (!content1.hasClass("collapsing")) {
content1.dequeue("collapsequeue");
}
});
content1.on("shown.bs.collapse hidden.bs.collapse", function(){
content1.dequeue("collapsequeue");
});
});
The .queue() names a queue AS WELL as adds functions to a queue, .dequeue() simply RUNS the queue. The code isn't completely perfect as it goes against DRY coding (much like the response I found in Bootstrap Collapse accordion on hover) - this is because I am not able to use the href tag in a element since I need that so that I can link to different webpages rather than the div element containing the hidden content.
Any idea on making the code shorter/efficient? I have to repeat the JS for every tab and I feel like there is probably a better way to do this that what I have come up with.
This question has been answered before: Bootstrap Collapse accordion on hover
If you don't want/need the fancy animation, you could also use pure CSS:
https://jsfiddle.net/vvu5ozh1/4/
With CSS transitions you could even do the animation, but that would be a bit more complicated.
<div class="panel">
<div class="title">
Title1
</div>
<div class="content">
COntent1
</div>
</div>
<div class="panel">
<div class="title">
Title2
</div>
<div class="content">
COntent2
</div>
</div>
.panel:hover .content {
display:block;
}
.content {
display: none;
}
Related
I am having a problem with make "table of content" expand and collapse with a button in Bootstrap 4.
Here is my code:
https://codepen.io/nht910/pen/RwwwyKB
Snippet:
<div class="main-wrapper col-12">
<div class="post-wrapper">
<div class="post-body d-flex">
<div class="post-content">
<p>...</p>
</div>
<div class="post-toc">
<!-- this table of content i use Boostrap-TOC to auto generate: https://afeld.github.io/bootstrap-toc-->
<nav class="sticky-top" id="toc"></nav>
</div>
</div>
</div>
</div>
Can you guys please help me to put "table of contens" inside a colapse button and when clicked it we have animation like the images below.
Thank you guys so much.
To animate the side menu you have to make a transformation and slide the menu using translateX(100%);. You can then add a transition: all 300ms; to have a sliding effect.
You will also need to change the side menu width as you are sliding, so the content fills the space of the side menu.
I think I achieved the effect you wanted, Example below:
https://codepen.io/diogoperes/pen/NWWWMYW
I added some animation with jQuery, as well as added the button and some Bootstrap classes, to bring your main content at the center.
Here's the jQuery method:
$(function() {
$("#toc-button").click( function() {
$(".post-toc").stop(true).animate({width:'toggle'}, 400);
});
});
Example here: https://codepen.io/evelyng/pen/XWWWqYg
I'm using a Bootstrap accordion and it works like a charm, no problem at all. However, I'd like to have a link to one of the tabs in the accordion. The idea is that once I click on the link, I'm taken to that part of teh page (the accordion is really down in the page) and open the tab.
So I used the following:
<i class="mdi-action-info"></i>
which should work. And it does in part: it opens the accordion tab just right, however, the page doesn't scroll to the anchor as it should. It just stays in the same position, but opening the accordion.
Any idea how to fix it? I have found answers related to jQuery UI accordion but nothing about BS accordion (and the jQuery UI answers didn't work either), really don't know why isn't this working
In order to scroll to the anchor, you should wait until your collapsable div is fully shown.
JQuery helps us to easily work out with that by collapse events.
$(document).ready(function() {
$("#section-two").on('shown.bs.collapse', function() {
window.location = "#section-two";
});
});
Check out Bootstrap JS Collapse Reference on w3schools.com for a quick documentation.
You can do it manually like so:
Open group 2
JS
$('#my-link').click(function(e) {
$('#collapseOne').collapse('hide');
$('#collapseTwo').collapse('show');
});
Fiddle
In my case I prefer to avoid adding JavaScript and decide to use two attributes (data-target and href) so that each of them has one job: 1)launch tab & 2)go to anchor:
<a data-toggle="collapse" data-parent="#accordion" data-target="#$foo" href="#$foo">
Building off of Michele's answer, here is an example where you can do an animated scroll to the div:
$(document).ready(function() {
$('#accordionEvent').on('shown.bs.collapse', function() {
var position = $('#accordionEvent').offset().top;
$('HTML, BODY').animate({scrollTop: position }, 500); //500 specifies the speed
});
});
Here is a working version that doesn't just force open an according but actually toggles it like you would expect. It will also scroll to the page anchor. Best of all it's dynamic so you don't need to manually code a bunch of functions for each according group.
Your webpage will look something like this:
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading accordian-button">
<h4 class="panel-title">
Section One
</h4>
</div>
<div class="accordian-body panel-collapse collapse in">
<div class="panel-body">
Section One Text
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading accordian-button">
<h4 class="panel-title">
Section Two
</h4>
</div>
<div class="accordian-body panel-collapse collapse in">
<div class="panel-body">
Section Two Text
</div>
</div>
</div>
</div>
<div>
Now for the code:
$(".accordian-button").click(function(e) {
that = $(this)
accordian = that.siblings('.accordian-body')
$(".accordian-body").not(accordian).collapse('hide')
accordian.collapse('toggle')
})
// Kludge for allowing all accordians to be collapsed to start
$(".accordian-body").collapse('hide')
Here's a working fiddle:
http://jsfiddle.net/dkcb8jLq/31/
Notice you can just click on the div to toggle it or you can click on the text to toggle and go to the link.
All,
I'm trying to populate a boostrap accordion expanded div with html using ajax- namely, only load the html if a user expands a collapsed accordion element. The HTML is:
<script src="/static/expand_db.js"></script>
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-body ">This is the panel's body</div>
<div id="collapse0" class="panel-collapse collapse">
<div class="panel-body">expanded content - this is to be loaded with ajax</div>
</div>
<div class="panel-footer">
<a id="expand0" data-toggle="collapse" data-parent="#accordion" href="#collapse0">Expand</a>
</div>
</div>
</div>
</div>
</div>
</div>
and the associated javascript (straight from the flask docs) is:
$(function() {
$('a#expand0').on('show.bs.collapse', function (){
$.getJSON($SCRIPT_ROOT + '/_add_numbers', {
a: $('input[name="a"]').val(),
b: $('input[name="b"]').val()
}, function(data) {
$("#result").text(data.result);
});
return false;
});
});
Now (clearly), the code won't work (no var's a and b, '#results' div not defined, which is left as a followup/edit for later), but monitoring the console (using Eclipse, flask requests are shown there), there seems to be no server call at all when pressing the 'expand' link. Note that the accordion works fine (expands and collapses).
Replacing
$('a#expand0').on('show.bs.collapse', function (){ with
$('a#calculate').bind('click', function() { in the javascript shows the proper server call: "127.0.0.1 - - [18/Jan/2014 11:45:58] "GET /_add_numbers HTTP/1.1" 404 -"
but overrides the accordion expand functionality (which makes sense).
Any ideas?
When you swap use the click binding, returning false at the end of the function will override the collapse function. Removing the return false; may help.
As to doing it using the show.bs.collapse binding, is it really the a#expand0 element that has a show.bs.collapse event? Isn't it the #collapse0 element (or one of the others)?
I'm using jQuery to show and hide areas on my site with just a toggle. Which works fine, but if i have multiple elements I want to show and hide individually on the page I have to write a bit of jQuery for each item. Is there a way to do it for a class or ID within the encapsulating class?
heres my jQuery:
jQuery('.collapse').click(function() {
jQuery('#filterArea').toggle('slow', function() {
});
});
And heres my content:
<div class="tabs">
<div class="ui-widget-header">
<div class="collapse" id="boxId">Content Box</div>
</div><br />
<div class="addPadLeftNoFloat" id="filterArea">
<p>Content for box</p>
</div>
</div>
I want to be able to have a few areas on the page with the class of collapse that just close the filterArea within the outer collapse? Or similar? I'm not doing a great job of explaining this! - So if i have two divs with the class of collapse, when i click them the filterarea of that div collapses
Tom
Instead of having filterArea as an id, change it to a class.
<div class="tabs">
<div class="ui-widget-header">
<div class="collapse" id="boxId">Content Box</div>
</div>
<br />
<div class="addPadLeftNoFloat filterArea">
<p>Content for box</p>
</div>
</div>
Also change your JavaScript to this:
jQuery('.collapse').click(function() {
jQuery('.filterArea').toggle('slow', function() {
});
});
A working example.
Edit: if you only want to collapse .filterArea elements with the enclosing .tab element, use JavaScript something like this:
$('.collapse').click(function() {
$(this).closest('.tabs').find('.filterArea').toggle('slow');
});
Updated example.
I would like to create a simple javascript slideshow that allows a user to click 'Previous' or 'Next' and have the element slide in from the right or left depending. Content will be coming in from a CMS, so it's not 'hard-coded' persay. My markup would look like this ideally (where the most recent entry receives the 'show' class):
<span class="back">Previous slide</span>
<span class="next">Next Slide</span>
<div id="slideshow">
<div class="client show">
<p>Yada</p>
</div>
<div class="client hide">
<p>Yada</p>
</div>
<div class="client hide">
<p>Yada</p>
</div>
<div class="client hide">
<p>Yada</p>
</div>
</div><!--end slideshow-->
I need something that will automatically detect order and allow the number of .client classes to be anything. This seems very close: http://jsbin.com/ekecu but I don't want it to be based on visible links to switch, just the same absolutely positioned previous and next buttons.
Would really appreciate some help, or if you were feeling especially generous an source snippet I could use.
Shadow Box or Fancybox?