Скрыть/показать div, как изменить тег в скрипте

Question

У меня есть довольно простой рабочий скрипт, который показывает и скрывает div.

Проблема в том, что я не могу установить тег в идентификатор или класс, и в настоящее время он установлен на селектор элементов, который не то, что я хочу. Что я могу изменить в этом JS, я позволю установить его в класс, который я могу показать/скрыть при щелчке. fiddle http://jsfiddle.net/dXWAY/2/

$("p").click(function() { 
    $("div").slideToggle("slow"); 
}) 

p { 

    border:0 none; 

    font-size:2em; 

    background:transparent; 

} 

div { 

    display:none; 

    width:400px; 

    height:200px; 

    background:#f5f5f5; 

} 

<p>hello</p> 
<div class="div">hello</div> 

Answer 1

Вы имеете в виду это ???

$("#myP").click(function() { 
    $("#myDiv").slideToggle("slow"); 
}) 

<p id="myP">hello</p> 
<div class="myDiv">hello</div> 

Answer 2

Изменение дел до .div или еще лучше, менее запутанным и сделать его более читаемым человеком:

.hideableDiv { 

display:none; 

width:400px; 

height:200px; 

background:#f5f5f5; 

} 

Где . указывает, что это имя класса.

В сущности вашей

<div class="div"> 

Не применять класс, потому что «ДИВ» в вашем CSS означает применить это ко всем Div элементов.

С изменениями, я предлагаю ваш ДИВ бы стать

<div class="hideableDiv"> 

Это позволило бы сделать свой селектор JQuery:

$(".hideableDiv") 

Answer 3

Я не уверен, что это то, что вы хотите, но, глядя на ваш fiddle, p не может находиться в div, так как ваш css устанавливает все divs для отображения: none.

<div id="portfolio"> 
    <div class="portfolio-img"> 

     <div class="div">hello</div>> 
    </div> 
</div> 

<p>hello</p> 

Как уже упоминалась уловка, было бы лучше, чтобы назначить отображаемый: ни к классу, а не все элементы Div.

Смотрите здесь

http://jsfiddle.net/jboneca/dXWAY/4/

Answer 4

Вы пытались создать аккордеон?

jsFiddle

<div id="portfolio"> 
    <div class="portfolio-img"> 
     <a class="toggleBtn">Click Me!</a> 
     <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore accusamus porro modi ut itaque ipsum natus explicabo vero sequi beatae libero voluptatibus sit culpa debitis tempore! Sint eum ipsum consequatur!</div> 
    </div> 
</div> 

#portfolio { 
    background: none repeat scroll 0 0 #EEEEEE; 
    border-radius: 10px 10px 10px 10px; 
    float: left; 
    width: 200px; 
} 

#portfolio .portfolio-img { 
    width:100%; 
    background:#ccc; 
    overflow:hidden; 
    float:left; 
    clear:left;  
} 

.toggleBtn { 
    background:deepskyblue; 
    display:block; 
    float:Left; 
    width:100%; 
    padding:10px; 
    border-bottom:1px solid #ccc; 
    border-top:1px solid #fff; 
    color:#fff; 
    cursor:pointer; 
} 

.content { 
    background:skyblue; 
    float:left; 
    overflow:hidden; 
    width:100%; 
    padding:10px; 
} 

$('.content').hide(); 

$('.toggleBtn').on('click', function() { 
    $(this).next('.content').slideToggle(); 
    return false; 
});