At runtime I have a loop that creates a number of divs with the same class depending on the number in the database.
<div class="show">....</div>
<div class="show">....</div>
<div class="show">....</div>
I want to display this div using the slideToggle() function with jQuery. For each of these I have a separate hyperlink which when clicked should display the div. Also there are a number of tags in between the hyperlink and the div that I want to toggle.
<div>
<div>
View
</div>
<br />
</div>
<div>
<div class="clear"></div>
</div>
<div class="show">....</div>
<div>
<div>
View
</div>
<br />
</div>
<div>
<div class="clear"></div>
</div>
<div class="show">....</div>
<div>
<div>
View
</div>
<br />
</div>
<div>
<div class="clear"></div>
</div>
<div class="show">....</div>
$(function () {
$(".display").click(function(){
$(".show").slideToggle();
return false;
});
});
Naturally when this is called each div layer is toggled, regardless of which hyperlink is clicked. I want to just toggle the div closest to the given hyperlink.
Thanks in advance.
Find the <div> relatively by going from this using tree traversal functions, like this:
$(function () {
$(".display").click(function () {
$(this).next().slideToggle();
return false;
});
});
In this case since it's the next sibling element we care about, use .next(), if the structure is different from the question, you'll need to adjust it accordingly, go get from the <a> you clicked on (this) to the <div> you want to toggle.
$(function () {
$(".display").click(function () {
$(this).next.(".show").slideToggle();
return false;
});
Or while you loop through creating your divs, can you add (for example) a rel value that's incremented by one every time? Giving you something like...
View
<div class="show" rel="1">....</div>
View
<div class="show" rel="2">....</div>
View
<div class="show" rel="3">....</div>
This would then link the two divs so that you could get the rel value of your clicked element and use that to identify the shown / hidden div.
<script type="text/javascript">
$(function () {
$(".display").click(function () {
var element_id = $(this).attr('rel');
$(".show").attr('rel', element_id).slideToggle();
return false;
});
});
Related
<div class='selected><div class="test"></div><div class="cancel"></div></div>
I need to hide the div with class selected after the cancel class is clicked. There are many of these, therefore it has to be the previous one.
I tried doing this but it does not work:
$(document).on('click','.cancel',(e)=>{
$(e.currentTarget).prev('.selected').hide()
})
It registers the click but does not hide .selected
Please put the ending class quotation mark <div class='selected> to <div class='selected'> and use the following code because .selected is parent so:
$(".cancel").on("click",function(e){
$(this).closest('.selected').hide();
});
Use closest to get the closest ancestor. Or to get the sibling using prev, update your HTML.
Both will solve your issue, but not sure from question if you want to hide the cancel, or not.
$(document).on('click', '.cancel', (e) => {
$(e.currentTarget).prev('.selected').hide()
})
$(document).on('click', '.cancel', (e) => {
$(e.currentTarget).closest('.selected').hide()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='selected'>
<div class="test">Selected Parent</div>
<div class="cancel">Cancel</div>
</div>
<hr />
<div>
<div class='selected'>
<div class="test">Selected Sibling</div>
</div>
<div class="cancel">Cancel</div>
</div>
This approach will find the sibling, but hide the parent. Seems like what you really want.
$(document).on('click', '.cancel', (e) => {
$(e.currentTarget).prev('.selected').parent().hide()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="test selected">Selected Parent</div>
<div class="cancel">Cancel</div>
</div>
I would like to slide divs, all of them will have same id because they'll generate inside loop so also trigger has same id. That's why I want to use one function, at the moment function works only for first div and I have no idea how to fix it. I would like that each button would work for div above him.
html part
<div id='slide'>
hello
</div>
<p id='but'>click</p>
<div id='slide'>
hello
</div>
<p id='but'>click</p>
and the js
$(document).ready(function(){
$(this).click(function(){
$("#slide").slideToggle("slow");
});
});
First of all, don't have same ids on one page - use classes instead. If you want to do something with the element before clicked item, you can use prev(), something like this (in your code just change css('color', 'red') to slideToggle("slow"), I have added it just for example):
$(document).ready(function() {
$(".but").click(function() {
$(this).prev().css('color', 'red');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='slide'>
hello
</div>
<p class='but'>click</p>
<div class='slide'>
hello
</div>
<p class='but'>click</p>
Few issues:
Use classes not IDs and use the ID of the click element #but instead of this for your click function
<div class='slide'>
hello
</div>
<p class='but'>click</p>
<div class='slide'>
hello
</div>
<p class='but'>click</p>
$(document).ready(function(){
$('.but).click(function(){
$(".slide").slideToggle("slow");
});
});
I want to use jquery to slidedown the description classes when title classes are clicked. However, what I want to do is when a specific title is clicked, only the immediate next description should slidedown. How can I do that in one block of code?
$(document).ready(function(){
$(".title").click(function(){
$(".description").slideToggle();
})
})
<div> <h2 class="title">title</h2>
<table class="description">description</table>
</div>
<div> <h2 class="title">title</h2>
<table class="description">description</table>
</div>
<div> <h2 class="title">title</h2>
<table class="description">description</table>
</div>
<div> <h2 class="title">title</h2>
<table class="description">description</table>
</div>
$(".description").slideToggle(); takes all elements with class=description, not just the one you want.
Use next() near the selected one title.
$(document).ready(function(){
$(".title").click(function(){
$(this).next(".description").slideToggle();
})
})
I was trying to remove the whole parent div if it doesn't have the wc-gallery class on it. What I have in my script is the reverse of what I need. Basically it hide everything that has the wc-gallery on it.
SCRIPT:
// Additional Scripts
$(window).load( function() {
$(".gallery-container2 .gallery-item .wc-gallery").hide();
});
$(".gallery-container2 p").click(function() {
var id = $(this).data('id');
$("[data-id=" + id + "].gallery-item .wc-gallery").toggle()
});
$(function(){
$(".gallery-item").each(function(){
$(this).children('.wc-gallery').parents('.gallery-container2').hide();
});
});
Basically this will work fine if I Hide all the containers and display the child div afterwards though my content won't render due to script conflicts. Only way to solve this without conflict is to load first all of the containers then hide() or remove() them.
SCRIPT: (conflict due to onload content rendering)
$('.gallery-container2').hide();
$(function(){
$(".gallery-item").each(function(){
$(this).children('.wc-gallery').parents('.gallery-container2').show();
});
});
HTML: (1st set is the one should be visible 2nd set is the one that needs to be remove or hide.)
<ul>
<li><div class="gallery-container2">
<p data-id="1723"><strong>some text</strong></p>
<div class="gallery-item" data-id="1723">
<div class="wc-gallery" style="display: none;"></div>
</div>
</div></li>
<li><div class="gallery-container2">
<p data-id="2455"><strong>View before and after</strong></p>
<strong></strong>
<div class="gallery-item" data-id="2455">
<div><div></div></div>
</div>
</div></li>
</ul>
Loop through the '.gallery-container2' element and find out whether it has '.wc-gallery' children. if not hide the element.
$('.gallery-container2').each(function(){
var $this = $(this);
//find element with 'wc-gallery' class
var hasGallery = $this.find('.wc-gallery').length > 0;
if(!hasGallery){
$this.hide();
}
});
Pure JS you might do like this in ES6 terms.
var divsToHide = document.querySelectorAll("div div :not(.wc-gallery)");
for (var div of divsToHide) div.parentElement.parentElement.style.display = "none";
<div class="gallery-container2">
<p data-id="1723"><strong>some text</strong>
</p>
<div class="gallery-item" data-id="1723">
<div class="wc-gallery">first container</div>
</div>
</div>
<div class="gallery-container2">
<p data-id="1724"><strong>some text</strong>
</p>
<div class="gallery-item" data-id="1724">
<div>
<div>second container</div>
</div>
</div>
</div>
Try this. If div has children with class .wc-gallery than it will show the parent otherwise hide the parent.
$(function () {
$(".gallery-item").each(function () {
if($(this).children('.wc-gallery').length > 0)
$(this).parents('.gallery-container2').show();
else
$(this).parents('.gallery-container2').hide();
});
});
I have a group of divs that appear on multiple pages, that have this pattern:
<div class=“entry”>
<div id=“post”>
<div class=“text”>
<div class=“service”></div>
<div class=“timeline”>
<div class=“entry-title”>
#hashtagOne
</div>
</div>
</div>
</div>
</div>
<div class=“entry”>
<div id=“post”>
<div class=“text”>
<div class=“service”></div>
<div class=“timeline”>
<div class=“entry-title”>
#hashtagTwo
</div>
</div>
</div>
</div>
</div>
<div class=“entry”>
<div id=“post”>
<div class=“text”>
<div class=“service”></div>
<div class=“timeline”>
<div class=“entry-title”>
#hashtagThree
</div>
</div>
</div>
</div>
</div>
This group appears on multiple pages.
My ideal javascript/jquery solution is something like this:
display:none on all div class="entry"
if child div class="entry-title" contains #something, change parent div class="entry" to display:block
so that on Page One I can insert this code to only show #hashtagOne, on Page Two only #hashtagTwo, etc. etc.
Try something like this:
$('.entry-title').each(function(i,v){
if ($(this).text().trim().charAt(0) =="#") {
$(this).closest('.entry').show();
}
});
https://jsfiddle.net/0ybstx9o/
This simply works fine :
$(document).ready(function(){
$(".entry").each(function(){
if($(this).find(".entry-title:contains('#something')").length > 0){
$(this).css("display","block");
}
});
});
Its pretty simple, just use :contains() and .closest() together either on page load or whatever event you want this display:block behavior to run.
As you want to show based on differnt pages, I suggest to use page title and set it to title="Page One" and title="Page Two" etc and then compare it in document ready state and show accordingly the desired div
jQuery(document).ready(function(){
jQuery('div.entry').hide();
if(jQuery(document).find("title").text() == 'Page One')
{
jQuery( "div.entry-title:contains('#something')" ).closest('.entry').show();
}
else if(jQuery(document).find("title").text() == 'Page Two')
{
jQuery( "div.entry-title:contains('#something Else')" ).closest('.entry').show();
}
});
$(".entry").find(".entry-title").text(function(key, text) {
if (text.indexOf("#")>=0) {
$(this).parents(".entry").hide()
}
})
Here is the working Plunker