CoderAz CoderAz - 1 month ago 14
jQuery Question

trying to replace a div with jquery slideDown click method

I am trying to replace a div with another one once an element has been clicked, but I cant seem to get it working. I have included the HTML and jquery code below. The element which is trying to slide in has a css property of display: none.

HTML:

<div class="meal-details">
<h4>heading</h4>

<h5 class="optiontabs meal-description">DESCRIPTION</h5>
<h5 class="optiontabs nutrition-description">NUTRITIONAL INFO</h5>

<div class="nutrition-breakdown">

<p>Text one</p>

</div>

<div class="meal-breakdown">

<p>Text two</p>

</div>

</div>


JQUERY:

$(".nutrition-description").click(function(){
$(this).find(".nutrition-breakdown").slideDown("fast");
});


Can anyone see what is preventing it from sliding down? All help of course is greatly appreciated!

Answer Source

Reason your code isn't working because you are using .find() method to find a container "nutrition-breakdown" inside "nutrition-description", which is not correct, "nutrition-breakdown" is actually a sibling of "nutrition-description"

Kindly use below code to fit you requirement.

$(".nutrition-description").click(function(){
    $(this).next().slideDown("fast");//change

});

If you dont need animation then better tp use .show() instead of slideDown().