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.
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 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
I am trying to figure out how to select a particular element with a certain class name within it's parent div, after a click event.
<div id="news">
<div class="one">
<p>news</p>
</div>
<div class="two">
</div>
</div>
<div id="users">
<div class="one">
<p>users</p>
</div>
<div class="two">
</div>
</div>
my simple jquery is as follows:
$(".clickme").on("click", function () {
//how to select only the element with the class "one" within the parent and show it
});
My failed attempts have been trying to use the parents and closest methods and code like $(this).parents().find(".one").show();
Any help would be great!!
Working Demo
try this
$(this).parent() refers to parent div
.prev('one') to previous sibling with class .one
$(this).parent().prev(".one").show();
Try with .prev()
$(this).parent().prev(".one").show();
See the DEMO
I would traverse it like this.
$('.clickme').click(function(){
$(this).parent().siblings().eq(0).show();
});
fiddle
I'm trying to include what should be a simple JQuery snippet into a friend's portfolio website to replace:
<div class="content one">
<h3>Content Title</h3>
<p>Body text.</p>
</div>
With:
<div class="content two">
<h3>Content Title</h3>
<p>Body text.</p>
</div>
When hovering on a separate div class of:
<div class="item two"><!--content two icon-->
<img src="" alt="" />
</div>
I have these separate classes of <div class="item"> that have icons in them. I want to be able to hover over the icon's class and replace the <div class="content"> class with another one that corresponds to the <div class="item"> icon.
For the JQ, I'm using the following:
<script type="text/javascript">
$('.item two').hover(function(){
$('.content one').replaceWith($('.content two'));
});
</script>
I have each content class (except .content one) as display: none; I think I need to throw in a .show(); event inside of the replaceWith(); function, but even if I remove display: none; on the classes, nothing replaces itself with the class I'm trying to replace.
I'm still relatively new to JQuery and JavaScript as a whole, so it's probably something stupid simple that I'm not doing right. Forgive me if I didn't include enough information to help you figure out the issue. Thanks for the help!
You have two classes on the same element in both cases, so your selectors should be:
.item.one
.item.two
.content.two
.content.two
try this:
$('.item.two').hover(function(){
$('.content.one').replaceWith($('.content.two'));
});