I have two divs in my parent class, one of which is found by $(this).parent('div').next('.deal-rolldown').show(); the other, $(this).parent('div').next('.client-rolldown').show(); does not find what appears to by syntactically equal.
In WordPress I iterate an (unknown) number of posts, each has 2 buttons to reveal more content. Up to now I have run a document ready function in each iteration to address each reveal by IDs but this is inefficient.
So I am trying to write a function using classes. Here's the JavaScript
$('.deal-link').click(function() {
$('.deal-rolldown').hide(); // hide all
$('.client-rolldown').hide(); // hide all
if ($(this).hasClass('active')) {
$(this).removeClass('active');
} else {
$(this).addClass('active');
$(this).next('.deal-rolldown').show();
}
});
$('.client-link').click(function() {
$('.client-rolldown').hide(); // hide all
$('.deal-rolldown').hide(); // hide all
if ($(this).hasClass('active')) {
$(this).removeClass('active');
} else {
$(this).addClass('active');
$(this).next('.client-rolldown').show();
}
});
Which is operating on this HTML
<div class="company">
<div class="company-inner">
<h2>Company 1 </h2> Company 1 Summary
</div>
Deal summary
Client review
</div>
<div style="display: none;" class="deal-rolldown">
Company 1 reveal 1 content
</div>
<div style="display: none;" class="client-rolldown">
Company 1 reveal 2 content
</div>
<div class="company">
<div class="company-inner">
<h2>Company 2 </h2> Company 2 Summary
</div>
Deal summary
Client review
</div>
<div style="display: none;" class="deal-rolldown">
Company 2 reveal 1 content
</div>
<div style="display: none;" class="client-rolldown">
Company 2 reveal 2 content
</div>
The addClass('active') works fine so I know I am getting the right button, but the next() function does nothing. No errors. How can I select the appropriate reveal from each button?
Edit following closure: this is a different question to the one marked as duplicate.
First thing, instead of doing
if ($(this).hasClass('active')) {
$(this).removeClass('active');
} else {
$(this).addClass('active');
}
You can use $(this).toggleClass('active');
Your problem is that next() returns the immediately following sibling, and .deal-rolldown is not a sibling of your .deal-link element.
What you want to do is
$(this).parent('div').next('.deal-rolldown').show();
The next() function gets the immediately following sibling that matches the selector. The div with class '.deal-rolldown' is NOT a sibling of the '.client-link' or '.deal-link' links. I would suggest using .closest('.deal-rolldown') instead of .next() which will find the closest matching element by traversing up through the current item's ancestors.
Related
I'm trying to get an if else statement that will allow me to run a function if the #selectedwhip div has the .active class. If it doesn't, I want it to run another function. I've just used the console to see if it will work but it only returns the else statement in the console.
The scenario is 3 images which act as links. By clicking the links they will add an active class to another div. By being active, an image will be inserted into the div. Clicking an image does add an active class to the div but it doesn't cause the if statement to log to the console.
Is there something that's preventing it from working?
jQuery
$(".carbutton").click(function(){
$("#selectedwhip").addClass("active");
});
$(function() {
if ($("#selectedwhip").hasClass("active")) {
console.log('active');
}
else {
console.log('unactive');
}
});
HTML
<div class="cars">
<h1>Title</h1>
<div class="section group trio-cars">
<div class="col span_1_of_3 carbutton" id="carbutton">
<a id="car1"><img src="img/frontleftbmw.jpg" width="100%"></a>
</div>
<div class="col span_1_of_3 carbutton" id="carbutton">
<a id="car2"><img src="http://placehold.it/350x150" width="100%"></a>
</div>
<div class="col span_1_of_3 carbutton" id="carbutton">
<a id="car3"><img src="http://placehold.it/350x150" width="100%"></a>
</div>
</div>
</div>
<div class="col span_1_of_3">
<div class="stats-image" id="selectedwhip">
</div>
</div>
you have to have a check function such as:
function check() {
if ($("#selectedwhip").hasClass("active")) {
console.log('active');
} else {
console.log('unactive');
}
}
$(function() {
$(".carbutton").click(function() {
$("#selectedwhip").addClass("active");
check();
});
});
Just noticed you have duplicate IDs carbutton and that makes it as a invalid markup creation. Every ID should have to be unique.
you have to be clear what do you want to do and when. because you're just executing a function immediately the page is ready
$(function() {
if ($("#selectedwhip").hasClass("active")) {
console.log('active');
}
else {
console.log('unactive');
}
});
the above code will check if selectedwhip it has active class in the first load of the page.
you have to attach this conditional to an event
I have a function that assigns dynamic classes to my div's. This function is a that runs on the page. After the page loads, all 10 of my primary 's have classes ".info1" or ".info2" etc...
I am trying to write a Jquery function that changes the class of the div you click on, and only that one. Here is what I have attempted:
$(".info" + (i ++)).click(function(){
$(".redditPost").toggleClass("show")
});
I have also tried:
$(".info" + (1 + 1)).click(function(){
$(".redditPost").toggleClass("show")
});
And
$(".info" + (i + 1)).click(function(){
$(".redditPost").toggleClass("show")
});
EDITED MY HTML: DIV RedditPost is actually a sibling to Info's parent
<div class="listrow news">
<div class="newscontainer read">
<div class=".info1"></div>
<div class="redditThumbnail"></div>
<div class="articleheader read">
</div>
<div class="redditPost mediumtext"></div>
</div>
My issue is two fold.
The variable selection for ".info" 1 - 10 isn't working because i doesn't have a value.
If I did target the correct element it would change all ".redditPost" classes instead of just targeting the nearest div.
Try like this.
$("[class^='info']").click(funtion(){
$(this).parent().find('.redditPost').toggleClass("show");
});
Alternative:
$('.listrow').each(function(){
var trigger = $(this).find("[class^='info']");
var target = $(this).find('.redditPost');
trigger.click(function(){
target.toggleClass("show");
});
});
Try this
$("div[class*='info']").click(function(){
$(this).parent().find(".redditPost").toggleClass("show")
});
Explanation:
$("div[class*='info'])
Handles click for every div with a class containing the string 'info'
$(this).parent().find(".redditPost")
Gets the redditPost class of the current clicked div
Since the class attribute can have several classes separated by spaces, you want to use the .filter() method with a RegEx to narrow down the element selection as follows:
$('div[class*="info"]').filter(function() {
return /\binfo\d+\b/g.test( $(this).attr('class') );
}).on('click', function() {
$(this).siblings('.redditPost').toggleClass('show');
});
.show {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="listrow news">
<div class="newscontainer read">
<div class="info1">1</div>
<div class="redditThumbnailinfo">2</div>
<div class="articleheader read">3</div>
<div class="redditPost mediumtext">4</div>
</div>
</div>
i have some divs i wanna toggle i am able to toggle but unable to remove classes when ever i click on the next div
index.php
<div id="menu_top1" class="menu_top1">LINK 1</div>
<div id="menu_top" class="menu_top">LINK 2</div>
<div id="content_area1" style="display:none;">
THIS IS LINK 1
</div>
<div id="content_area2" style="display:none;">
THIS IS LINK 2
</div>
Jquery.js
$('#menu_top1').click(function() {
$('#content_area1').toggle('slow', function() {
$('.menu_top1').toggleClass('active');
});
});
Here is a Fiddle https://fiddle.jshell.net/kunz/t5u6mcmn/
if you are trying to show corresponding content_area when you click on link and make the link active? you can check this
fiddle
i saw you using same id for multiple elements.just edited them.
still you want same id for all elements(strictly not recommended) check this fiddle
check this updated fiddle
$('.menu_top').click(function() {
var index = $( this ).index() + 1;
console.log(index);
$('[id^="content_area"]' ).hide();
$('#content_area' + index ).toggle('slow', function() {
$('.menu_top').toggleClass('active');
});
});
I have my code like this. It is supposed to show like horizontal buttons with dates. When the user clicks on one of that buttons, the box expands itself showing the pictures in it.
I'm trying to get the first child ID of the article clicked with jquery to be able to show the gallery_items with the first child ID without the "_title" at the end. But I get undefined.
My html:
<section id="gallery">
<article class="gallery_date">
<div id="1389848400_title">16-01-2014</div>
<div class="gallery_items" id="1389848400">
261689_10150238069156283_4353481_n.jpg<br>
IMG_4667.jpg<br>
millenium2.png<br>
</div>
</article>
<article class="gallery_date">
<div id="1389762000_title">15-01-2014</div>
<div class="gallery_items" id="1389762000">
IMG_4661.jpg<br>
</div>
</article>
<article class="gallery_date">
<div id="1389675600_title">14-01-2014</div>
<div class="gallery_items" id="1389675600">
bcn.png<br>
logoenmedio.png<br>
</div>
</article>
</section>
My Jquery:
$().ready(function() {
$(".gallery_date").click(function(event) {
console.log($(".gallery_date:first-child").attr("id"));
});
});
Thanks
"I'm trying to get the first child ID of the article clicked with jquery to be able to show the gallery_items with the first child ID without the "_title" at the end."
Do this:
$(this).children().first().prop("id").split("_")[0];
Or without jQuery so it's not so verbose:
this.children[0].id.split("_")[0];
But if that's the only need for the ID, then you could just select the element with .children() by its class:
$(this).children(".gallery_items")
the first child ID without the "_title".
You can use .replace() to remove '_title' or you can use .split()
$(document).ready(function() {
$(".gallery_date").click(function(event) {
var id = $(this).children().first().attr("id")
console.log(id.replace('_title',''));
console.log(id.split("_")[0]);
});
});
Try this:
$(document).ready(function() {
$(".gallery_date").click(function(event) {
console.log($(this).find('.gallery_items:first-child').attr("id"));
});
});
$(".gallery_date").click(function(event) {
console.log($(this).children().first().attr("id"));
});
If your html is structured the way it is, you can also just use the .next() method to get the gallery_items div, like this, so you don't have to worry about getting IDs and retrieving the DOM elements again:
$(document).ready(function() {
$(".gallery_date").click(function() {
$(this).next(".gallery_items").slideDown();
});
});
I have multiple rows of article and inside it I have .article-row with .content inside it and then .article-row is clicked. the current jQuery will find the .content and then toggle it. But I would like to change the code so that it would .hide() all instances of .content that are not related to the clicked one
$('.article-row').click(function(){
$(this).parent().find('.content').toggle();
});
<article class="feed1 entry">
<span class="article-row">
<span class="article-row-title">I am the title</span>
<span class="article-row-date">Sat, 07 Sep 2013 02:13:35 -0700</span>
</span>
<div class="content">
<p>I AM THE CONTENT</p>
</div>
</article>
Link Here
$('.article-row').click(function(){
if($(this).parent().find('.content').is(':visible')){
$('.content').hide();
$(this).parent().find('.content').show();
}
});
Hide all elements, then display the clicked one. But first verify if the clicked article is not already the active one to make sure it doesn't flicker or look weird if you animate the transition.
$('.article-row').click(function(){
if($(this).parent().find('.content').is(':visible')){
$('.content').hide();
}else{
$('.content').hide();
$(this).parent().find('.content').show();
}
});
Wouldn't be cleaner this way?
$('article.entry').on('click', '.article-row', function () {
$(this).siblings('.content').show();
$('.content').hide();
});