html - trying to replace a div with jquery slideDown click method -


i trying replace div 1 once element has been clicked, cant seem working. have included html , jquery code below. element trying slide in has 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 see preventing sliding down? of course appreciated!

reason code isn't working because using .find() method find container "nutrition-breakdown" inside "nutrition-description", not correct, "nutrition-breakdown" sibling of "nutrition-description"

kindly use below code fit requirement.

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

});

if dont need animation better tp use .show() instead of slidedown().


Comments

Popular posts from this blog

ubuntu - PHP script to find files of certain extensions in a directory, returns populated array when run in browser, but empty array when run from terminal -

php - How can i create a user dashboard -

javascript - How to detect toggling of the fullscreen-toolbar in jQuery Mobile? -