scotchpasta scotchpasta - 1 month ago 7
HTML Question

Using jQuery to select div with class signed by ruby iteration

I'm trying to do a click event where a user clicks a link that toggles a dropdown window. But only one window at a time.



$(".one").on('click', function(){
$(".two").slideToggle();
});

<div class="row visual_wrap text-center">
<ul class="containerviz no-bullet text-center">
<% @visualizations.each do |visualization| %>
<li class="viz-list-style">
<div class="one <%= visualization.id %>" style="background-image: url('<%= visualization.cover_image.to_s %>')" ><%= visualization.title %></div>
<div class="two <%= visualization.id %>">some text to check</div>
</li>
<% end %>
</ul>
</div>





Since I'm iterating through a database to bring each visualization to the page. I want a user to select a single visualization that will toggle a dropdown for it. But since I'm differentiating the each visualizations div by their class I'm not sure how to write that in jQuery. Right now the above jQuery will open and close every single visualization if I click any of them. How can I make this more specific? I've tried using an on click event with
$(this).find('.two').slidetoggle();
. But that did not work.

Answer
<script type="text/javascript">
    $(document).ready(function() {
       $('.two').hide()
       $('.one').on('click', (function() {
          $(this).next('.two').slideDown(200);
       });
    });
</script>
Comments