This question might be asked earlier, but I was not able to grasp the answers since there were a lot bunch of codes in every questions. I don't know how to put it in words. I think you guys will understand the situation once you see the code.
HTML
<div class="row">
<div class="large-9 columns">
<h3>By Christian Christiansen</h3>
</div>
<div class="large-3 columns">
<p class="raty"></p>
</div>
<div class="large-11 large-offset-1 columns">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, quasi nisi optio, earum facilis perspiciatis temporibus nobis nam velit incidunt. Recusandae accusamus pariatur, explicabo iure ea ex perspiciatis perferendis quam!</p>
</div>
<div class="large-8 columns">
<img src="images/ments.png" alt="">
<p class="inline_cmt">Comments (3)</p>
</div>
<div class="large-2 columns">
<img src="images/reply.png" alt="">
<p class="inline_rply">Reply</p>
</div>
<div class="large-2 columns">
<img src="images/report.png" alt="">
<p class="inline_rep">Report</p>
</div>
<div class="large-12 columns reply_box">
<label>
<textarea placeholder="submit your reply here.."></textarea>
</label>
<a href="#" class="button right">Submit</a>
</div>
<hr>
</div>
<div class="row">
<div class="large-9 columns">
<h3>By Christian Christiansen</h3>
</div>
<div class="large-3 columns">
<p class="raty"></p>
</div>
<div class="large-11 large-offset-1 columns">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, quasi nisi optio, earum facilis perspiciatis temporibus nobis nam velit incidunt. Recusandae accusamus pariatur, explicabo iure ea ex perspiciatis perferendis quam!</p>
</div>
<div class="large-8 columns">
<img src="images/ments.png" alt="">
<p class="inline_cmt">Comments (3)</p>
</div>
<div class="large-2 columns">
<img src="images/reply.png" alt="">
<p class="inline_rply">Reply</p>
</div>
<div class="large-2 columns">
<img src="images/report.png" alt="">
<p class="inline_rep">Report</p>
</div>
<div class="large-12 columns reply_box">
<label>
<textarea class="custom_textarea" placeholder="submit your reply here.."></textarea>
</label>
<a href="#" class="button right">Submit</a>
</div>
<hr>
</div>
<div class="large-12 columns reply_box">
<label>
<textarea placeholder="submit your reply here.."></textarea>
</label>
<a href="#" class="button right">Submit</a>
</div>
I have the same html multiple times in my code, What I want to achieve is, I want the div with classname reply_box to appear whenever I click the element with classname inline_reply. I have used jQuery toggle method to achieve this and the code is,
jQuery
$(".inline_rply").click(function() {
$(".reply_box").toggle();
});
My Problem: Whenever I click the reply button, all the elements having the classname reply_box are toggled whereas I just want to toggle only the one that I have clicked. I don't want to add different classnames to all div's since there will be numerous posts. Is there an easy way to do it? I heard that this can be done using this. But I donno how. Anyone with a simple example will be much appreciated. I think I have not confused you guys.
This question might be asked earlier, but I was not able to grasp the answers since there were a lot bunch of codes in every questions. I don't know how to put it in words. I think you guys will understand the situation once you see the code.
HTML
<div class="row">
<div class="large-9 columns">
<h3>By Christian Christiansen</h3>
</div>
<div class="large-3 columns">
<p class="raty"></p>
</div>
<div class="large-11 large-offset-1 columns">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, quasi nisi optio, earum facilis perspiciatis temporibus nobis nam velit incidunt. Recusandae accusamus pariatur, explicabo iure ea ex perspiciatis perferendis quam!</p>
</div>
<div class="large-8 columns">
<img src="images/ments.png" alt="">
<p class="inline_cmt">Comments (3)</p>
</div>
<div class="large-2 columns">
<img src="images/reply.png" alt="">
<p class="inline_rply">Reply</p>
</div>
<div class="large-2 columns">
<img src="images/report.png" alt="">
<p class="inline_rep">Report</p>
</div>
<div class="large-12 columns reply_box">
<label>
<textarea placeholder="submit your reply here.."></textarea>
</label>
<a href="#" class="button right">Submit</a>
</div>
<hr>
</div>
<div class="row">
<div class="large-9 columns">
<h3>By Christian Christiansen</h3>
</div>
<div class="large-3 columns">
<p class="raty"></p>
</div>
<div class="large-11 large-offset-1 columns">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, quasi nisi optio, earum facilis perspiciatis temporibus nobis nam velit incidunt. Recusandae accusamus pariatur, explicabo iure ea ex perspiciatis perferendis quam!</p>
</div>
<div class="large-8 columns">
<img src="images/ments.png" alt="">
<p class="inline_cmt">Comments (3)</p>
</div>
<div class="large-2 columns">
<img src="images/reply.png" alt="">
<p class="inline_rply">Reply</p>
</div>
<div class="large-2 columns">
<img src="images/report.png" alt="">
<p class="inline_rep">Report</p>
</div>
<div class="large-12 columns reply_box">
<label>
<textarea class="custom_textarea" placeholder="submit your reply here.."></textarea>
</label>
<a href="#" class="button right">Submit</a>
</div>
<hr>
</div>
<div class="large-12 columns reply_box">
<label>
<textarea placeholder="submit your reply here.."></textarea>
</label>
<a href="#" class="button right">Submit</a>
</div>
I have the same html multiple times in my code, What I want to achieve is, I want the div with classname reply_box to appear whenever I click the element with classname inline_reply. I have used jQuery toggle method to achieve this and the code is,
jQuery
$(".inline_rply").click(function() {
$(".reply_box").toggle();
});
My Problem: Whenever I click the reply button, all the elements having the classname reply_box are toggled whereas I just want to toggle only the one that I have clicked. I don't want to add different classnames to all div's since there will be numerous posts. Is there an easy way to do it? I heard that this can be done using this. But I donno how. Anyone with a simple example will be much appreciated. I think I have not confused you guys.
-
what is the correlation between the divs with classnames
large-2andlarge-12is that a typo ?? – karthikr Commented Sep 26, 2014 at 5:06 -
they are not related. I know that is confusing. I have just randomly picked the
div'sjust to show where my class exist. – Thomas Sebastian Commented Sep 26, 2014 at 5:10
3 Answers
Reset to default 4as i think you have to use the next keyword as the following
$(".inline_rply").click(function() {
$(this).closest('div').next('.reply_box').toggle();
});
** updation as per your html **
There is an another div having text Report, so for this you can use next again as following
$(".inline_rply").click(function() {
$(this).closest('div').next().next('.reply_box').toggle();
});
next() traverse the node one by one as per the selector.
Hope it helps...
I think you just apply this and check may be solve your problem .
$(".inline_rply").click(function() {
$(this).parent().next(".reply_box").toggle();
});
Updated Answer
$(".inline_rply").click(function() {
$(this).parent().next().next(".reply_box").toggle();
});
Demo
Demo 2
use this to target current element
$(".inline_rply").click(function() {
$(this).closest('div.large-2').next(".reply_box").toggle(); // this will be the clicked
});
.closest() will get the nearest parent element specified with class name and with next() you can target the next .reply_box class containing element.