Iterating through array in Rails as separate jQuery objects -
i iterating through array in rails show set of articles. i'd button slide toggle article open when clicked (so each headline , button, , text revealed on button click).
the array looks like:
<% @articles.each |article| %> <div class="article_header"> <h1><%= article.title %></h1> <button id="clickme" type="button">show more!</button> <div class="article_content"> <p><%= markdown article.content %></p> </div> <% end %> </div>
i trying toggle article_content following:
<script> $( ".article_content" ).hide() $( "#clickme" ).click(function() { $( ".article_content" ).slidetoggle( "300", function() { }); }); </script>
after reading other questions, believe issue article_content
class, why button opens , collapses of content text.
if iterating through array, can assign different ids target object clicking button article 1 opens , closes article 1 only?
unless have specific reason assign id button, set class on button , can use .next()
achieve want.
jquery:
$(".clickme").click(function() { $(this).next(".article_content").slidetoggle("300", function() {}); });
html: change id="clickme"
class="clickme"
this allow toggle multiple elements way want.
demo below
$(".article_content").hide() $(".clickme").click(function() { $(this).next(".article_content").slidetoggle("300", function() {}); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="article_header"> <h1> article 1 </h1> <button class="clickme" type="button">show more!</button> <div class="article_content"> <p> content 1 </p> </div> </div> <div class="article_header"> <h1> article 2 </h1> <button class="clickme" type="button">show more!</button> <div class="article_content"> <p> content 2 </p> </div> </div>
Comments
Post a Comment