Javascript: Развернуть / Свернуть несколько DIV с простым кодом?

Question

У меня есть несколько DIV на моей странице, которые я бы хотел развернуть / свернуть. Для этого я использую приведенный ниже код, но он применяется только ко всему классу. Могу ли я применить его к тому, что нажимается? (например, self.slideToggle ();)

// Activate Toggle for Showing / Hiding More Price Tables
        $(".slidingDiv").hide();
        $(".show_hide").show();

    $('.show_hide').click(function(){
    $(".slidingDiv").slideToggle();
    return false;
    });

});

РЕДАКТИРОВАТЬ: Вот пример разметки:

<a href="#" class="show_hide">Video & Music</a>
    <div class="slidingDiv">CONTENT HERE</div>

Answer 1

Это будет работать.

$('.show_hide').click(function(){
      $(this).next('.slidingDiv').slideToggle();
      return false;
});

jsfiddle - http://jsfiddle.net/ABrunkhorst/vFnqp/1/

Answer 2

Использование $(this) внутри вызова функции будет ссылаться на объект в области видимости, в данном случае тот, по которому щелкают.

$('.show_hide').click(function(){
   $(this).next('.slidingDiv').slideToggle();
   return false;
});

Вместо next() вы можете рассмотреть:

• children() - , чтобы выбрать только первый уровень детей
• contents() - , если вы пытаетесь получить все потомки (дочерние элементы + дочерние элементы дочерних элементов) элемента, по которому щелкают
• siblings() - , чтобы получить все элементы одного уровня в дереве иерархии
• prev() - , чтобы получить предыдущего брата
• next() - , чтобы получить первого брата
• prevAll() - , чтобы получить всех предыдущих братьев и сестер
• nextAll() - , чтобы получить всех следующих братьев и сестер
• parents() - для получения предков (обёрток) элемента, по которому щелкнули

Answer 3

используйте $(this) внутри события щелчка.

или если вы нажмете что-то в div, то что-то вроде ключевого слова parent.

так $(this).parent(".slidingDiv").slideToggle();

1010 * редактировать *

я думаю, вы также можете использовать это, основываясь на ваших изменениях;

$(this).next('.slidingDiv')

Answer 4

Мы можем использовать Аккордеон JQUERY UI, используя который мы можем эффективно переключаться.Мы должны добавить следующие ссылки JQuery

   <script src="//code.jquery.com/jquery-1.10.2.js"></script>
   <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <script>  $(function() {   
    $( "#accordion" ).accordion(); 
    });  
   </script> 
   <div id="accordion"> 
   <h3>Section 1</h3>
   <div>   
   <p>This is division 1  
   </p></div>  
   <h3>Section 2</h3>
   <div>
   <p>This is division2</p></div>

Для получения более подробной информации см. http://jqueryui.com/accordion/