Простой выпадающий div

Я борюсь с простой выпадающей ссылкой. У меня есть div с текстовой ссылкой, и при нажатии на этот текст должен появиться другой div с текстовой информацией.

Пока что HTML:

<div id="about" class="fluid">
    <a href="#">About & Contact</a>

    <div id="dropdown" class="fluid"><blockquote>
          We are a bla bla...</div>
</div>

Я использовал CSS, чтобы скрыть выпадающий div:

#dropdown {display: none;}

И функция jQuery:

<script>
    $(function(){
        $('#about').each(function(){
            $(this).click(function(){
                $(this).siblings('#dropdown').slideToggle(300);            
            });
        });
    });​​
</script>

Любая помощь будет оценена по достоинству, большое спасибо.


html dropdown jquery css
person Arnau    schedule 19.01.2016    source источник
comment
Ваш javascript подразумевает, что у вас есть больше элементов с одним и тем же идентификатором, что недопустимо, идентификаторы уникальны   -  person adeneo    schedule 19.01.2016

Ответы (2)


arrow_upward
0
arrow_downward

Другим способом может быть использование кода ниже

$("#about  a").click(function() {
    $("#dropdown").toggle();
    return false;
});

https://jsfiddle.net/santoshjoshi/n0yeo9nb/

person Santosh Joshi    schedule 19.01.2016
comment
Спасибо @Арнау. Добро пожаловать в Stack Overflow. Продолжайте вносить свой вклад в эту платформу. - person Santosh Joshi; 19.01.2016

arrow_upward
0
arrow_downward 

    $("#about").find("a:first-child").click(function() {
$("#dropdown").toggle();
return false;
});

используйте это как ваш js. здесь я использовал селектор поиска .. так как он быстрее по сравнению с другими селекторами.

person ameenulla0007    schedule 19.01.2016