jQuery логика для незакрепленных абзацев

Question

У меня есть следующая структура html.

 

<p class="expandableContent" ><span class="label">Computer and Laptop Repairs</span></p> 
<div style="clear: both;"> </div> 
<div class="services">content</div> 

<p class="expandableContent" ><span class="label">Softrware and Hardware</span></p> 
<div style="clear: both;"> </div> 
<div class="services">content2</div> 

 

Так я есть repetetion из Content1 Content2 content3 и т.д. Я сочинительство функцию переключения, так что, когда я нажимаю на первом абзаце первом содержание DIV расширяется. Когда я нажимаю второй абзац второй, он расширяется, но все остальные открытые сообщения обрушиваются.

Может кто-нибудь помочь.

Answer 1

Это должно сделать трюк для вас:

$(function() { 
    $('.expandableContent').click(function() { 
     $('.services').hide(); 
     $(this).nextAll('.services:first').show(); 
    }); 
}); 

Во-первых, вы будете скрыть все .services дивы, а затем выберите следующий после абзаца, которая была нажата, и расширить его.

Вот демо, что в действии: http://jsfiddle.net/Ender/5nYpT/

Answer 2

$('.expandableContent').click(function() { 
    $('.services').hide(); 
    $('.services', this).show(); 
}); 

Кроме того, добавить их в свой HTML:

<div class="expandableContent"> 
    <p>....</p> 
    <div style="clear:both;"></div> 
    <div class="services">content</div> 
</div> 

Answer 3

Вы можете сделать это без изменения вашего HTML тоже.

$(document).ready(function() { 
    $('.services').hide(); 
    $('.expandableContent').click(function() { 
     $('.services:visible').toggle(); 
     $(this).nextAll('.services:first').toggle(); 
    }); 
}); 

Код должен быть в основном сам по себе. Выбрав только видимые сервисы, я могу переключить их на скрытые. Затем я использовал nextAll(), чтобы найти всех следующих братьев и сестер с классом .services, но только взять первый. (Я не могу использовать next(), поскольку он принимает только сразу следующий родной брат, а затем фильтрует его по классу. Не то, что мы хотим.) Затем я переключаю это между видимым и скрытым. Рабочий пример можно найти в http://jsfiddle.net/Lv2mW/.