How to toggle class between two element using jquery? - javascript

I have accordian lists with one list open always. How can I toggle the active class when the button is clicked?
<ul class="accordion one-open">
<li class="active">
<div class="title">Title 1</div>
<div class="content">Content 1</div>
</li>
<li>
<div class="title">Title 2</div>
<div class="content">Content 2</div>
</li>
</ul>
<button>Toggle the content </button>

Use .toggleClass("active") of jquery and check the below snippet.
$(document).ready(function(){
$("#toggel_class").on('click',function(){
$("ul li").toggleClass("active");
});
});
.active { color: red }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="accordion one-open">
<li class="active">
<div class="title">Title 1</div>
<div class="content">Content 1</div>
</li>
<li>
<div class="title">Title 2</div>
<div class="content">Content 2</div>
</li>
</ul>
<button id="toggel_class">Toggle the content </button>

$("button").on("click", function() {
$("li").toggleClass("active");
});
This toggles the class when the button is clicked: https://jsfiddle.net/mqhyLohe/

Try looking at JavaScript classList.toggle() (not compatible with IE9 and lower). Otherwise take a look at jQuery UI (if jQuery is the path you want to wander).

Check if it works
$(".accordion li").click(function(){
$("li").removeClass('active');
$(this).addClass('active');
});

you have to give your list an id
$("#item1").click(function(){
$(".active").removeClass("active");
$(this).addClass("active")
});

I too had faced the same problem. Solved it using icons. Please refer the answer here
This is what I had used before:
if($(this).text() == "-")
{
$(this).text("+");
}
else {
$('#accordion .opener').text("+");
$(this).text("-");
}
});

Related

How to change the class of an element based on the class of another

I have a list of navigation items where when one is clicked it's status becomes active
$(document).ready(function() {
$('li').click(function() {
$('li').removeClass('active');
$(this).addClass('active');
});
});
I have a container div with multiple hidden divs inside and based on the order of the li that is active I want to be able to show the hidden div that is the same order as the li.
<div class="col-md-9">
<div id="item1">
<p>Section#1</p>
<img src="image-plugin.jpg" class="img-responsive">
</div>
<div id="item2">
<p>Section#2</p>
<img src="image-plugin.jpg" class="img-responsive">
</div>
<div id="item3">
<p>Section#3</p>
<img src="image-plugin.jpg" class="img-responsive">
</div>
</div>
So basically if the second li has the active class then I can have the second of the hidden divs be visible.
Ideally a solution that doesn't involve attaching id's to the li's would be best but I've been having trouble achieving this and would appreciate any help possible.
Take a look at this demo bootply.
For this HTML:
<div class="col-md-3">
<ul class="list-group">
<li class="list-group-item">Item 1</li>
<li class="list-group-item">Item 2</li>
<li class="list-group-item">Item 3</li>
</ul>
</div>
<div class="col-md-9">
<div id="item1" class="showhide hidden">
<p>Section#1</p>
<img src="http://www.placehold.it/350x150" class="img-responsive">
</div>
<div id="item2" class="showhide hidden">
<p>Section#2</p>
<img src="http://www.placehold.it/350x150" class="img-responsive">
</div>
<div id="item3" class="showhide hidden">
<p>Section#3</p>
<img src="http://www.placehold.it/350x150" class="img-responsive">
</div>
</div>
This JS:
$(document).ready(function() {
$('li').click(function() {
$('li').removeClass('active');
$(this).addClass('active');
var index = $(this).index();
$('.showhide').addClass('hidden').eq(index).removeClass('hidden');
});
});
You could use index() method and following logic regarding click event:
$(document).on("click", "li:not(.active)", function () {
$('li.active').add(this).toggleClass('active');
$('div[id^=item]').hide().eq($(this).index()).show();
});
-jsFiddle-
You can use index() which will return order number - 1 of matched elements.
So you can write in next way:
$(document).ready(function() {
$('li').click(function() {
$('li').removeClass('active');
$(this).addClass('active');
var thisIndex = $(this).index();
$('.col-md-9 .div').eq(thisIndex).show();
});
});

Not able to hide/show the div on mouse click

I have a div contents of which are dynamically generated.
I am trying to implement hide/show facility.
It kinda works but I am looking at "Hide/show only the div that's clicked."
HTML
<div class="showmenu">First Div</div>
<div class="menu" style="display: none;">
<ul>
<li>Val1</li>
<li>Val2</li>
<li>val3</li>
</ul>
</div>
<div class="showmenu">Second Div</div>
<div class="menu" style="display: none;">
<ul>
<li>val4</li>
<li>val5</li>
<li>val6</li>
</ul>
</div>
JavaScript
$(document).ready(function() {
$('.showmenu').click(function() {
$('.menu').slideToggle("fast");
});
});
Fiddle
Use relative looks up for the menu item, instead of a document wide look up($('.menu')).
In your case the showmenu and menu items are next siblings, so you can use .next()
$(document).ready(function() {
$('.showmenu').click(function() {
$(this).next('.menu').slideToggle("fast");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="showmenu">First Div</div>
<div class="menu" style="display: none;">
<ul>
<li>Val1</li>
<li>Val2</li>
<li>val3</li>
</ul>
</div>
<div class="showmenu">Second Div</div>
<div class="menu" style="display: none;">
<ul>
<li>val4</li>
<li>val5</li>
<li>val6</li>
</ul>
</div>
You need to find the .menu element related to the element which was clicked. To do that you can traverse from the element that raised the event using the this keyword and the next() method. Try this:
$('.showmenu').click(function () {
$(this).next('.menu').slideToggle("fast");
});
Example fiddle
Use this:
$(this) inside the click event handler is the menu that is clicked. next will give menu associated with it.
$(document).ready(function() {
$('.showmenu').click(function() {
$(this).next('.menu').slideToggle("fast");
});
});
Demo: http://jsfiddle.net/tusharj/APA2S/4502/
Use .next() in jquery and $(this) for current object
$('.showmenu').click(function() {
$(this).next('.menu').slideToggle("fast");
});
Fiddle
Your looking for jQuery next()
$(document).ready(function() {
$('.showmenu').click(function() {
$(this).next('.menu').slideToggle("fast");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="showmenu">First Div</div>
<div class="menu" style="display: none;">
<ul>
<li>Val1</li>
<li>Val2</li>
<li>val3</li>
</ul>
</div>
<div class="showmenu">Second Div</div>
<div class="menu" style="display: none;">
<ul>
<li>val4</li>
<li>val5</li>
<li>val6</li>
</ul>
</div>

Toggle link with content

I've this code :
Link1
Link2
Link3
<div>Content link 1</div>
<div>Content link 2</div>
<div>Content link 3</div>
I want that each link matches to its div (Link1 => Content link 1, Link2 => Content link 2, ect .....)
I wrote this Javascript
$('div').hide();
$(".btn").click(function () {
$(this).next("div").slideToggle('slow');
});
But it does not work. If someone could help me.
$('div').hide();
$(".btn").click(function () {
var index = $(this).attr("data-index");
$("div[data-index!='"+index+"']").slideUp('slow', function(){
$("div[data-index='"+index+"']").delay(400).slideDown();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Link1
Link2
Link3
<div data-index="1">Content link 1</div>
<div data-index="2">Content link 2</div>
<div data-index="3">Content link 3</div>
You need to create a link between each content div and the button to activate it. You also need to start all content divs as hidden.
$('.btn').click(function(elm) {
$('.content').hide();
console.log($(this).attr('data-link'))
var id = $(this).attr('data-link')
$('#' + id).slideToggle('slow')
})
.content {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a data-link="link1" href="#" class="btn">Link1</a>
<a data-link="link2" href="#" class="btn">Link2</a>
<a data-link="link3" href="#" class="btn">Link3</a>
<div id="link1" class="content">Content link 1</div>
<div id="link2" class="content">Content link 2</div>
<div id="link3" class="content">Content link 3</div>
You are misunderstanding the .next selector. You will always end up selecting the first div.
Link1
Link2
Link3
<div id="div1">Content link 1</div>
<div id="div2">Content link 2</div>
<div id="div3">Content link 3</div>
$(".btn").click(function (evt) {
var rel = $(this).attr('data-rel');
$("#"+rel).slideToggle('slow');
});
For your provided markup:
$('div').hide();
$(".btn").click(function() {
$('div').hide(); // hide open divs
var index = $(this).siblings().andSelf().index(this);
$(this).nextAll("div").eq(index).slideToggle('slow');
});
There are lot of ways doing so, but i find this more easy and handy. I have used :eq(index) of JQuery.
Just as in CSS we have tag:nth-child(num); in JQuery there is this
:eq(index) to select specific tag that are siblings.
For Example:
HTML
<li>1</li> <li>2</li> <li>3</li> <li>4</li>
JQuery
$("li:eq(2)").hide();
Now what it does it selects the third li tag and hide. Yes it's
index starts from 0(Zero)
Your Solution
WORKING:DEMO
HTML just added id to your anchor tags
Link1
Link2
Link3
<div>Content link 1</div>
<div>Content link 2</div>
<div>Content link 3</div>
JQuery
$("div").hide(); /* At beginning hiding all div's */
$("a").click(function(){
var curId = this.id; /* Find and store id of <a> tag is clicked */
var findId = curId-1;/* This is for :eq() selector */
$("div").slideUp();/*Hide the rest div if visible accept the one clicked */
$("div:eq("+ findId +")").fadeToggle();
});

How to change style of active toggled anchor when using jquery toggle?

I'm using the following to toggle several links on a page with relevant data
<div class="buttons">
<a class="show" target="1">Option 1</a>
<a class="show" target="2">Option 2</a>
<a class="show" target="3">Option 3</a>
<a class="show" target="4">Option 4</a>
</div>
<div id="div1" class="targetDiv">Lorum Ipsum 1</div>
<div id="div2" class="targetDiv">Lorum Ipsum 2</div>
<div id="div3" class="targetDiv">Lorum Ipsum 3</div>
<div id="div4" class="targetDiv">Lorum Ipsum 4</div>
JS:
$('.targetDiv').hide();
$('.show').click(function () {
$('#div' + $(this).attr('target')).toggle('').siblings('.targetDiv').hide('');
});
Which works for what I want just fine but what I would like to know is if it's possible to have the style of the link change when each one is active. So the user knows they're viewing the contents of that link. So if the current show class is background: #000; for example, can I change it to background: #fff; somehow when that option DIV is being displayed? Then back to normal when it's not?
JSfiddle of current setup http://jsfiddle.net/W3HtS/1/
Add active class name on click function
$('.show').removeClass('active');
$(this).addClass('active');
DEMO
Try this way : Working Fiddle
$('.show').not(this).removeClass('active');
if($(this).hasClass('active')){
$(this).removeClass('active');
}else{
$(this).addClass('active');
}
});
Try this
$('.targetDiv').hide();
$('.show').click(function () {
$(".show").removeClass("highlight");
$(this).addClass("highlight");
$('#div' + $(this).attr('target')).toggle('').siblings('.targetDiv').hide('');
});
define the style that you want to apply in highlight class

jQuery accordion

Our html:
<ul class="accordion">
<li>
<h2 class="a-head">head 1</h2>
<div class="a-body">body 1</div>
</li>
<li>
<h2 class="a-head">head 2</h2>
<div class="a-body">body 2</div>
</li>
<li>
<h2 class="a-head">head 3</h2>
<div class="a-body">body 3</div>
</li>
</ul>
JS:
$(".accordion .a-head").click(function()
{
$(this).css({backgroundColor:"#ccc"}).next(".a-body").slideToggle().siblings(".a-body").slideUp();
$(this).siblings().css({backgroundColor:"#fff"});
});
This accordion begins to work If I remove <li></li>. How do I make it work with current code?
Actually problem is in .siblings().
Thanks.
I can offer you this:
jQuery:
$('li h2.a-head').click(
function(){
$(this).closest('ul').find('div.a-body').slideUp(400);
$(this).closest('li').find('div.a-body').slideToggle(400);
});
css:
li div.a-body {
display: none;
}
JS Fiddle demo.
Is it what you want? : http://jsfiddle.net/v2Z5L/1/
It could be simpler if you'd put a container for your "a-body" elements. For now, each of them slide, one by one.

Categories

Resources