<div id=klik>KLIK </div>
<div class="list">
<div class="list-wrapper">
<div class="line">1</div>
<div class="line">2</div>
</div>
<div class="line">3</div>
<div class="line">4</div>
</div>
This is the Html. I use Javscript to hide the whole list first. Then I would like to make a onclick function to show just the first two elements, the two in div list wrapper. This the code i have written.
$(document).ready(function(){
$(".list").hide();
$("#klik").click(function(){
$(".list-wrapper").show();
});
});
The problem it never shows the elements.
You are trying to show an element that is still wrapped inside a hidden parent element. In case you hide and show the same selection it is working just fine. You could do it like this:
$(document).ready(function(){
$(".list").hide();
$("#klik").click(function(){
$(".list").show().children().not('.list-wrapper').hide(); //show .list, then hide everything that is not inside .list-wrapper
});
});
Working demo
EDIT:
And fix your HTML markup (missing quotes "" ) <div id=klik>KLIK</div>
You are hiding the parent element of what you are trying to show. show will only display the elements you called it on, it won't cascade up the DOM tree.
$(document).ready(function(){
$(".list").hide();
$("#klik").click(function(){
$(".list").show(); //Show .list elements instead
});
});
Related
So in an html structure like this:
<a class="member-main">
<!-- other divs and html elements -->
</a>
<div class="hidden-group-item">
<!-- other divs and html elements -->
</div>
I want to bind a click event to an html element with class .member-main so to show a hidden element .hidden-group-item.
There are plenty of those elements repeated in the page in pairs so I'd also like to show only that .hidden-group-item immediately below its respective .member-main
I'm aiming to do so with a function like below, helped by this previous question:
$('body').on('click', '.member-main', function() {
$(this).next('.hidden-group-item')[0].toggleClass('hide')
});
I can get the element associated on click through this keyword (if I console log it), but I can't seem to grab that node that'd let me traverse down to the hidden-group-item.
How does this work in this case and what would be the most efficient way to achieve this?
...[0] returns a nodeElement not a jQuery object that has the function toggleClass. Try this:
$('body').on('click', '.member-main', function() {
$(this).next('.hidden-group-item') // next is already returning one item so no need to try to access the first
.toggleClass('hide')
});
This works as expected
The docs about the .next() method says the following:
Get the immediately following sibling of each element in the set of
matched elements. If a selector is provided, it retrieves the next
sibling only if it matches that selector.
Because you have the onClick handler and you're selecting the currently clicked element as $(this) then the matched set of elements is only the one you clicked, thus the next() call gets the .hidden-group-item just beneath it.
Sample
$('body').on('click', '.member-main', function() {
$(this).next('.hidden-group-item').toggleClass('hide')
});
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<a class="member-main">
<!-- other divs and html elements -->
hello
</a>
<div class="hidden-group-item hide">
<!-- other divs and html elements -->
hidden
</div>
<a class="member-main">
<!-- other divs and html elements -->
hello
</a>
<div class="hidden-group-item hide">
<!-- other divs and html elements -->
hidden
</div>
<a class="member-main">
<!-- other divs and html elements -->
hello
</a>
<div class="hidden-group-item hide">
<!-- other divs and html elements -->
hidden
</div>
JSFiddle
I have a main document div to add some html element through variable "str"
<div id='documentDiv'></div>
I have a functionality which will add some html element to my #documentDiv.
var str="<div class='customElement'></div><a href='' onclick='append(event);'>append</a>"
And I have a functionality to append str to documentDiv as many time I want:
$('#documentDiv').append(str);
after appending two times I have the same structure appended twice inside my documentDiv element
<div id='documentDiv'>
<div class='customElement'></div><a href='' onclick='append(event);'>append</a> // want to append some text to respective .customElement div
<div class='customElement'></div><a href='' onclick='append(event);'>append</a>
</div>
My problem is with onclick ,i want to append something inside the respective div under customElement class.But with onClick ,it always gets appended to the first div.How can i get respective div element using jquery?
function append(event){
$('.customElement').append("some text");
}
Maybe this could help you:
Without a-tag:
$('.customElement').bind('click',function(){
$(this).append("some text");
});
or with a-tag:
$('.customElement a').bind('click',function(){
$(this).parent().append("some text");
});
I believe you want to use this.
function append(event){
$(this).append("some text");
}
Since you are adding your elements dynamically you should delegate the events by adding the on method to the parent element.
Here is an example.
function append(event){
$(this).prev().append("some text");
event.preventDevault();
}
$('#documentDiv').on('click', 'a', append);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id='documentDiv'>
<div class='customElement'></div><a href='#'>append</a>
<div class='customElement'></div><a href='#'>append</a>
</div>
Similar stuff has been asked earlier but I could not find this.
<article class="fyre-comment-article>
<div class="fyre-comment-wrapper">Parent Post
<div class="fyre-outer-comment-container"> Contains all child
<div class="fyre-comment-article">Single child with the same pattern as parent </div>
</div>
</article>
I was able to handle the collapsing when parent div closes before child and is not in the parenthesized format.
How to collapse (onclick) the Parent Post by only showing "Parent Post Details" and same should be applied internally to each Parent Post.
Thanks,
Your class attribute in article tag is missing a closing quote and one of the div tags isn't getting closed at all.
But basically you can just do:
$('.fyre-comment-article').click(function() {
$(this).find('.fyre-outer-comment-container').toggle();
});
which will show/hide the two most nested divs when you click on the text inside the article tag.
Here's a JSFiddle.
Update
If you're adding elements to DOM after the script loads, then the binding doesn't work for them and you can fix it for instance by using .on() method, like this:
$(document).on('click', '.fyre-comment-article', function() {
$(this).find('.fyre-outer-comment-container').toggle();
});
You may try this:
HTML:
<article class="fyre-comment-article">
<div class="fyre-comment-wrapper">Parent Post
<div class="fyre-outer-comment-container"> Contains all child
<div class="fyre-comment-article-inner">Single child with the same pattern as parent </div>
</div>
</div>
</article>
jQuery:
$(function() {
$('.fyre-comment-wrapper').click(function() {
var $article = $(this).find('.fyre-comment-article-inner');
if (!$article.is(':visible')) {
$article.slideDown(); //or .fadeIn() or .show()
} else {
$article.slideUp(); //or .fadeOut() or .hide()
}
});
});
Here is a demo
Edit
If you want 'Contains all child' label to appear and disappear too, you have to write
.find('.fyre-outer-comment-container');
instead of
.find('.fyre-comment-article-inner');
Demo 2
I know this is a simple thing to do but can't get my head around what I'm doing wrong. I have a h2 tag which will run a function on click, this will then locate a div with the class 'homeSlide' and then run the slideToggle method. However I can't seem to get the content to slide without making the two divs below with the same class name also slide.
Here is my HTML:
<h2>Header</h2>
<div id="home_newproducts_list">
<div class="category-products">
<ul class="products-grid">
<li>Hold fetured products so will be excluded from the slideToggle</li>
</ul>
<div class="homeSlide">
<!-- Content that needs to be displayed on slide -->
</div>
</div>
</div>
Jquery:
jQuery(document).ready(function(){
jQuery("#home_newproducts_list ul.products-grid").not(":first").wrapAll('<div class="homeSlide">');
jQuery(".home-spot h2").click(function(){
jQuery(this).next('.homeSlide').slideToggle(1000);
});
});
I hope i've explained it in enough detial.
So all I want to be able to do is run the slideToggle method on the homeSlide div, but only on the next one after the h2.
jQuery(".home-spot h2")
assuming you are selecting the <h2>Header</h2> element here
try with next() and find().
jQuery(this).next().find('.homeSlide').slideToggle(1000);
next() gets the immediately following sibling which is div#home_newproducts_list in your case
I have the next code dynamically created using JQuery. Theere are multiple row class divs placed one under the other.
<div class="row">
....
</div>
<div class="row">
<div class="line_type"></div>
<div class="download_value"></div>
<div class="flag"></div>
<div class="email"></div>
<div class="prize"></div>
</div>
<div class="row">
....
</div>
After i create these divs I have a "pointer" to a specific div which is of class row. In JQuery, how do i make it so I go down the DOM tree, until i reach the div of class line_type and download_value and remove them both, and also I'd like to go one more node down, at the div of type email and change some of it's CSS attributes.
I was not able to find anything on the web, maybe it's cause i'm a noob at these still.
I have a "pointer" to a specific div which is of class row ->
Assuming that you have the this object of the corresponding div with class row.. then you can use .find to get the line_type and download_value inside that div.
$(this).find('.line_type').remove();
$(this).find('.download_value').remove();
Then you can use the same .find to get the div with class email and access the .css
$(this).find('.email').css(/* You code*/);
Assuming row_pointer points to the row in question:
$('.line_type, .download_value', row_pointer).remove();
$('.email', row_pointer).css(...);
check this out
$('div.row').bind('click', function() {
$this = $(this);
$('div.line_type, div.download_value', $this).remove();
$('div.email', $this).css('background-color', 'red');
});
http://jsfiddle.net/YvyE3/