Can I add an additional slider on this page without adding duplicate functions and additional css classes?
I know how to duplicate them no problem but I'd like someone to teach me the proper way to reuse the current code.
I'm going to take a guess and say that I'm probably going to need the "this" keyword.
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>
jsFiddle: http://jsfiddle.net/chaddly/mR3Vn/
You can do something like this -
<div class="flip">Click to slide the panel down or up</div>
<div class="panel">Hello world!</div>
some more flip's-
<div class="flip">Click to slide the panel down or up</div>
<div class="panel">Hello world!</div>
$(document).ready(function () {
$(".flip").click(function () {
$(this).next('.panel').slideToggle("slow");
});
});
jsFiddle Demo
Part 2
Modify the code with:
$('.panel').hide();
$(this).next('.panel').slideToggle("slow");
Hide all the panels first and then open the one currently clicked.
Related
I have an accordion with 6 buttons (button class ".course-accordion") to expand or collapse.
Under the accordion I have a div ("collapse-bottom") that I would want hidden if all accordions are collapsed, but visible if 1 (or more) are open. This div contains a button to collapse all.
I've tried show/hide if the button class contains 'active', and I've tried to show/hide if the accordion content has a max-height of 0/100%. I can't seem to get it working.
Any ideas? jQuery or Javascript would be fine here.
Sample Code Markup:
<div class="course-wrapper">
<button class="course-accordion active">Course 01</button>
<div class="course-panel">Course Content</div>
</div>
<div class="course-wrapper">
<button class="course-accordion">Course 02</button>
<div class="course-panel">Course Content</div>
</div>
<div class="course-wrapper">
<button class="course-accordion">Course 03</button>
<div class="course-panel">Course Content</div>
</div>
<!-- I want this to be hidden unless one or all of the above accordions is active -->
<div class="expand-collapse">
<a class="collapse-bottom">Collapse All</a>
</div>
You can use hasClass() to check if a certain element has a particular class.
This can be done using jquery:
<div class="course-wrapper">
<button class="course-accordion">Course 01</button>
<div class="course-panel">Course Content</div>
</div>
<div class="course-wrapper">
<button class="course-accordion">Course 02</button>
<div class="course-panel">Course Content</div>
</div>
<div class="course-wrapper">
<button class="course-accordion">Course 03</button>
<div class="course-panel">Course Content</div>
</div>
<div class="expand-collapse">
Collapse All
</div>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
function check_accord() {
//check if any button has class active and shows the collapse-bottom element
if ($(".course-accordion").hasClass("active")) {
$(".collapse-bottom").show();
} else {
$(".collapse-bottom").hide();
}
}
$(".course-accordion").click(function () {
//toggles the active class of the clicked button
$(this).toggleClass("active");
check_accord();
});
$(".collapse-bottom").click(function () {
//removes the active class from all the buttons when collapse bottom is clicked
$(".course-accordion").removeClass("active");
check_accord();
});
check_accord(); //executes the function each time the webpage is loaded
</script>
Here is just one example of some pseudo code (Sorry, been a while since I have written any JS or JQuery, so disregard if this doesn't help, but I figured maybe I could help get you on the right track), but this could be accomplished in many ways.
Keep track of the state of the Accordion by having a Counter that gets updated with the amount of Accordion Divs that have a class == "Active" every time one of the Accordion Buttons is clicked.
//Then "While" the counter is greater than or equal to 1, Show the Hide/ Display Button.
Hope that helps. Id be glad to write something out, but just wanted to give a quick and dirty implementation for you to get you started. But again, if you are looking for something more concrete then I am sure that either I, or someone else, would be happy to help you out.
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 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;
}
Found one example that is exactly what I would like to have.
Please resize your window to 700px less and url is http://www.subway.com.au
thanks for reading this.
My layout is as the following:
<div id="left">
<div id="left-container" style="display:none;">Content foo
</div>
</div>
<div id="right">
<div id="right-container" style="display:none;">Content bar
</div>
</div>
<div class="overlay"></div>
Basically, when click either #left or #right, relatively the #left-container or #right-container will slideUp or slideDown, and at the same time .overlay will be showed or hidden. Of course, when containers are slideUp, clicking all screen rather than itself will slideDown and removeClass .overlay.
I know this question has been brought over a lot of times. However it seems still not working for me. Thanks for your time.
I would use a little different HTML for that -
<div id="left" class="header">
A
<div class="container">Content foo
</div>
</div>
<div id="right" class="header">
B
<div class="container">Content bar
</div>
</div>
<div class="overlay"></div>
and with the JS -
$(function(){
$(".header").on("click", function(){
if($(this).find(".container").is(":visible")){
$(".header").find(".container").each(function(){
$(this).slideDown();
});
$(this).find(".container").slideUp();
$(".overlay").show();
}else{
$(this).find(".container").slideDown();
$(".overlay").hide();
}
});
});
Here is the fiddle - http://jsfiddle.net/n8ykqLuy/1/
NOTE: At first I thought your requirement was custom. But I think what you are looking for is an accordion.
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.