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
Related
<div>
<div>
<div class="one">child of 1 st Div</div>
</div>
<div>
<div class="two'>child of 2 st Div</div>
</div>
<div>
<div class="three">child of 3 st Div</div>
</div>
</div>
Here what I want to do is on clicking the div with class="one" I want to change the content of the third div where class="three"
You have a typo error here : <div class="two'> it should be this : <div class="two">
For the script, there are many way to do it, here is one :
$(function(){
$('.one').click(function(){
$('.three').text('hey');
});
});
Live example
In jQuery, you can attach a click event handler to a jQuery object using the click method. You select an element using the global jQuery function (usually jQuery or $). To select an element with a specific class, prepend . to the class.
$('.one').click(function(event) {
// this function will be fired when the div with class `one` is clicked
var $three = $('.three');
// $three is now a jQuery object representing the div
// DOM element with the class `three`
// your code here
});
First of all in your code you should correct your code for class = "two". In order to select a div use jquery .on() event handler.
$('selector').on('click',callback());
Refer to the following code.
$('.one').on('click',function(){
$('.three').addClass('changeColor');
})
I have also created a jsFiddle: https://jsfiddle.net/58kng68a/
I have my posts lopping on an .each loop and I have a link to display comments on the bottom of the loop.
I want to show the comment section on click, but when I click comments for all posts open as well. I only want the one that's clicked to open.
I've tried a ton of different examples I've found on this site, but so far none of them have worked.
I'm sure this is extremely easy to accomplish, but I'm a JavaScript noob.
Here is the JSFiddle link - http://jsfiddle.net/omgwhyamisobad/h0yhvqa3/
As well as the code snippet -
JS
$(document).ready(function() {
$('.artist-micropost-comment-click').click(function() {
$('.artist-micropost-comments-container').toggle();
});
});
HTML
<div class="artist-micropost-social">
<a class="artist-micropost-comment-click">comments</a>
</div>
<div class="artist-micropost-comments-container">
...
...
...
</div>
<div class="artist-micropost-social">
<a class="artist-micropost-comment-click">comments</a>
</div>
<div class="artist-micropost-comments-container">
...
...
...
</div>
<div class="artist-micropost-social">
<a class="artist-micropost-comment-click">comments</a>
</div>
<div class="artist-micropost-comments-container">
...
...
...
</div>
CSS
.artist-micropost-comments-container {
display: none;
}
The way that you are trying to grab the relevant element is wrong. You need to traverse the DOM with respect to the element that is being clicked. If you try to use the direct class selector in this case, then it would select all the elements which are having the supplied class.
Try,
$(document).ready(function() {
$('.artist-micropost-comment-click').click(function() {
$(this).closest('.artist-micropost-social')
.next('.artist-micropost-comments-container').toggle();
});
});
DEMO
Use
$(document).ready(function() {
$('.artist-micropost-comment-click').click(function() {
$(this)
.closest('.artist-micropost-social') //Find parent container
.next('.artist-micropost-comments-container') //Find next comments container
.toggle();
});
});
Try This SEE DEMO
$(document).ready(function() {
$('.artist-micropost-comment-click').click(function() {
$( this ).parent().next().slideDown().siblings('.artist-micropost-comments-container').slideUp();
});
});
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/
<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
});
});
I have got to this so far using the jQuery docs
$('[class^="layout"] > ("*")').click(function(e) {
alert("inside");
});
What I am trying to achieve is detecting whether something inside a div which has a class beginning with the name 'layout' is clicked and returning that parent div's class.
For context an example div would be something like
<div class="builder_body" id="the_content">
<div class="layout_2cwlh_header">
<h1>Header</h1>
</div>
<div class="layout_2cwlh_wrapper">
<div class="layout_2cwlh_content">
<h1>Content</h1>
<p>sometext</p>
</div>
<div class="layout_2cwlh_sidebar">
<h1>Sidebar</h1>
</div>
</div>
</div>
So when I click on anything like a h1/p or anything inside a div, I need to return the parent div's class
I'd suggest:
$('[class^="layout"]').click(function(e) {
e.stopPropagation(); // added to prevent a new alert every
// time the click bubbles to a new parent
alert($(this).closest('div[id]').attr('id'));
});
JS Fiddle demo.
Quite simple actually:
$('[class^="layout"]').click(function(e) {
var parent = $(this).parent;
// do something with the parent.prop('class');
});