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.
Related
I am trying to make Bootstrap 4 dropdown have this style: slinky.js.org
This is what I have by now: https://codepen.io/nht910/pen/yLexeEM
Main code:
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<div class="main-container">
<div class="menu-container">
<div class="menu-1">
<span>Link-1</span>
<button class="button-1">arrow-1</button>
</div>
<div class="menu-2">
<span>Link-2</span>
<button class="button-2">arrow-2</button>
</div>
</div>
<div class="submenu-container">
<div class="submenu-1"> <!-- submenu of .menu-1 -->
<div class="arrow-back">
<button class="button-back-1">Arrow back 1</button>
</div>
<div>
<span>Child 1</span>
</div>
</div>
<div class="submenu-2"> <!-- submenu of .menu-2 -->
<div class="arrow-back">
<button class="button-back-2">Arrow back 2</button>
</div>
<div>
<span>Child 2</span>
</div>
</div>
</div>
</div>
</div>
To make dropdown has slide effect:
I set two classes .submenu-1 and .submenu-2 to display: none, and when user click on arrow button, corresponding submenu will be shown and slide to it.
when user click on arrow back, it will slide back to main menu, and after finish sliding effect, it will hide submenu.
That is what I have for now. But I don't know how to resize dropdown's height to fit content inside it (dynamic height) like slinky.js.org.
Thank you so much.
Try using hide & code when you click.
you can simply do it by using jQuery
$("selector").hide() & $("selector").show()
when user clicks your custom buttons
Solution: https://codepen.io/nht910/pen/OJMobEm
I change height of dropdown using JS with .submenu-1 is the content I want dropdown to fit:
$('.dropdown-menu').height($('.submenu-1').outerHeight());
But it got one problem. At the first time I click on arrow button (it is the first time height of dropdown changed), the transition animation doesn't work. But after that, it work perfectly. So I add another line at global to make the first time that height is changed happen on page load. And now it work perfectly for me.
I have a page what will have a few buttons on it and on a click of a button I basically need it to swap divs out - I have them wrapped in a parent div with an id and then each div that will be replaced will get it's own id as well. I got this code to work for swapping, but it will be tedious and not good code at all to do this if we end up with 30 or so pairings.
So how do I clean this up so on a click, the active div is set to display: none, and the one clicked is set to display: block?
Here is my jQuery code that is working for now. For this I want the macaroni to display and the farfalle to hide.
$('#macaroniButton').click(function(){
$('#macaroni').toggle();
$('#farfalle').toggle();
});
<div id="topchanger">
<div id="farfalle">
.....
</div>
<div id="macaroni">
.....
</div>
</div>
<div class="circlerow">
<div class="circlepasta" id="macaroniButton">
......
</div>
<div class="circlepasta" id="AnotherButton">
......
</div>
</div>
</div>
You could start with this. Expand my answer accordingly.
$('#macaroniButton').click(function(){
$("#macaroni").show().siblings('div').hide();
});
You can give a class to all the div that you want to show/hide and before handling a click, hide all div with that class. Let's say you give it a class 'item':
<div id="topchanger">
<div id="farfalle" class="item">
.....
</div>
<div id="macaroni" class="item">
.....
</div>
</div>
and your javascript will be:
$('div.item').click(function(){
$('div.item').hide();
$(this).show();
});
Note that $(this) refers to the item that was just clicked.
Hope it hepls
I've been working on this for a while and thought I'd like to get some expert advice.
I have 4 divs on a page labelled sun-sun3. When each of the divs is clicked a corresponding div (suninfo-suninfo3) will appear and when clicked again will disappear. While one of the info divs is open the others will always be closed.
Here is the html
<div class="dot sun">
</div>
<div class="info suninfo">Some Content</div>
<div class="dot sun1">
</div>
<div class="info suninfo1">Some Content</div>
<div class="dot sun2">
</div>
<div class="info suninfo2">Some Content</div>
<div class="dot sun3">
</div>
<div class="info suninfo3">Some Content</div>
The CSS is styled so that the sun divs use pulse which works fine and the suninfo divs appear in various locations around the page. All works perfectly.
The following Javascript also works fine, however it is using toggle() which I would like to replace. My code is also quite long.
$(document).ready(function(){
$(".sun").click(function(){
$(".suninfo").toggle();
$(".suninfo1,.suninfo2,.suninfo3").hide();
});
$(".sun1").click(function(){
$(".suninfo1").toggle();
$(".suninfo,.suninfo2,.suninfo3").hide();
});
$(".sun2").click(function(){
$(".suninfo2").toggle();
$(".suninfo,.suninfo1,.suninfo3").hide();
});
$(".sun3").click(function(){
$(".suninfo3").toggle();
$(".suninfo,.suninfo1,.suninfo2").hide();
});
});
As you can see, there isn't much to it and it does work, but I'd rather not use toggle()
Cheers
I would suggest leveraging jQueryUI for this -- as it provides this functionality out of the box.
http://jqueryui.com/accordion/
In addition it will not require you to modify your script if you decide to later add divs for sun4, sun5, and/or sun6, etc.
You can use start with jquery selector in this case but need to rename 'suninfo' class name because 'sun' and 'suninfo' class names starts with 'sun' word, so it will be difficult to use start with jquery selector. Also selector class name should be first while writing in div
like if we are using $("[class^='suninfo']") then suninfo should be first call in <div class="suninfo info">.
Please see below jquery
$(document).ready(function(){
$("[class^='sun']").click(function(){
var nextElement = $(this).next();
$(nextElement).toggle();
$("[class^='infoSun']").not($(nextElement)).hide();
});
here rename your suninfo class to infoSun and call it at first place like below
<div class="dot sun">
</div>
<div class="infoSun info">Some Content</div>
<div class="dot sun1">
</div>
<div class="infoSun1 info">Some Content</div>
<div class="dot sun2">
</div>
<div class="infoSun2 info">Some Content</div>
<div class="dot sun3">
</div>
<div class="infoSun3 info">Some Content</div>
Please see this for more information on start with selector in JQuery
To make it more simple according to you structure:
$(".dot").each(function(){
$(this).click(function(){
$(this).next().toggle();
$(".info").not($(this.next())).hide();
})
})
Why don`t you like toggle?
To manually control it you can:
$(element).hide('slide',{direction:'left'},1500) //([animation, params, time])
$(element).show('slide')
if using jQuery
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.
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.