Toggle link with content - javascript

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();
});

Related

How to toggle class between two element using jquery?

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("-");
}
});

Trigger event with same ID elements

I have a menu list that refer to different projects.
Each list item shares its "ID" with a project showcased in a gallery.
<div class="menu">
<ul>
<li id="id1">project 1</li>
</ul>
</div>
<div class="gallery">
<div class="proc id="id1">project 1</div>
</div>
I'd like a jQuery function that :
When a list item from the menu is clicked, gets the project with the same id to do something.
I really don't know where to start from and I'm stuck at that :
<script>
$( "li#id1").click(function() {
$( ".project#id1" ).show();
});
</script>
Many thanks
As the comments said the IDs must be unique and you have missing quote.
You can use data attributes to handle your logic or combination of ids and data attributes.
Try something like this:
HTML
<div class="menu">
<ul>
<li data-project-id="first-project-id">project 1</li>
...
</ul>
</div>
<div class="gallery">
<div class="proc" data-project-id="first-project-id">project 1</div>
</div>
JavaScript
$('.menu li').click(function(){
var targetId = $(this).attr('data-project-id');
$('.proc[data-project-id="' + targetId + '"]').show();
});
The click event is attached to every li item in the element with class .menu.
On click event we extract the data-project-id attribute from the clicked element, find the project elemenet from gallery and show it.
JSFiddle Demo
you can use normal id also (as selector)
HTML
<div class="menu">
<ul>
<li id="first-project-id">project 1</li>
...
</ul>
</div>
<div class="gallery">
<div class="proc" id="first-project-id">project 1</div>
</div>
jQuery
$('.menu li').click(function(){
var targetId = $(this).attr('id');
$('.proc[id="' + targetId + '"]').toggle();
});

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

How do you find a div with a variable class?

HTML:
<ul>
<li>This is Link 1</li>
<li>This is Link 2</li>
<li>This is Link 3</li>
</ul>
<div id="somediv">
</div>
<div class="a1">div 1</div>
<div class="a2">div 2</div>
<div class="a3">div 3</div>
JQUERY:
$('a').on('click', function(e) {
$('#somediv').html($('."this.id"').text());
e.preventDefault();
});
Basically what I want to do is, when I click one of the links in the list, it replaces the contents of "somediv" with the contents of a div that has the class that matches the id of the link.
In other words, when I click link id "a1", I want it to display class "a1" in "somediv". I just don't know the syntax for how to call that in the second line of the jquery.
Do this
$("#a1").click(function() {
var divClass = $(this).attr("id");
$("#somediv").empty().append($("."+divClass).html());
});
http://jsfiddle.net/vD4hA/
Only issue was with your concatination.
You don't need to use $(this).attr('id') since this inside the context is the DOM element and id or any attribute can be retrieved directly as object properties.
$('a').on('click', function(e) {
$('#somediv').html($('div.' + this.id).text()); // You probably dont need 'div.'
//but it is safe to use as you are not selecting based on id(unique) but a class which
//can be in multiple places.
});
$('a').click(function (e) {
$('#somediv').html($('.' + $(this).attr('id'))).text();
e.preventDefault();
});
jsFiddle example
I suggest you modify slightly your code to accept the new HTML5 specifications. More specifically, use the aria-owns which is exactly what you're doing here. See demo.
HTML
<ul>
<li>This is Link 1</li>
<li>This is Link 2</li>
<li>This is Link 3</li>
</ul>
<div id="somediv">
</div>
<div style="display:none;">
<div id="div1">div 1</div>
<div id="div2">div 2</div>
<div id="div3">div 3</div>
</div>
JS
$("a[aria-owns]").on("click", function(e) {
$("#somediv").empty()
.append($("#" + $(this).attr("aria-owns")).clone());
return e.preventDefault(), false;
});

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