jQuery Simple Ráp Div?

Question

Tôi đang tìm kiếm sự phù hợp, đơn giản, mã nhỏ để làm những điều sau đây:

• Bấm vào phần tử với Class Áp dụng cho nó.

• DIV.CLASS - Mở rộng và hiển thị nội dung ẩn. (slideDown - Toggle)

• DIV.CLASS - Thu gọn và ẩn nội dung hiển thị trước đó. (SlideUp - Chuyển đổi)

tôi đã tạo ra một jsFiddle đây: http://jsfiddle.net/Q4PUw/1/

Vì vậy, để được mơ hồ và dễ dàng, tôi cần phải biết làm thế nào để có được một CLASS DIV để trở thành ẩn và có thể nhìn thấy một lần một yếu tố trên cùng một trang có một CLASS được áp dụng cho nó, trong đó sẽ kích hoạt và hủy kích hoạt HIDDEN và hoặc nội dung HTML VISIBLE. Và tôi cần nó được ẩn theo mặc định.

Tôi đã xem tất cả qua internet và chỉ tìm thấy các tập lệnh rất phức tạp, nhưng không có gì đơn giản. Tôi đã tìm thấy Accordians đơn giản ... Nhưng những người không bao giờ gần gũi, họ chỉ cần mở một số khác.

Cảm ơn tất cả các bạn đã giúp đỡ và tôi hy vọng rằng tôi có thể trả lời câu hỏi này tương tự cho nhiều người khác ...

Lưu ý: Tôi biết rất ít JavaScript và jQuery hoặc thậm chí.

Answer 1

$('.expand-one').click(function(){ 
    $('.content-one').slideToggle('slow'); 
}); 

Demo: http://jsfiddle.net/Q4PUw/2/

Answer 2

tôi đang tìm kiếm tại này và muốn có một div collapsible đó đã được thiết kế riêng cho tôi. Sau đó, tôi nhận ra những gì tôi muốn là một cửa sổ duy nhất jquery-ui accordion.

<div id="collapse"> 
    <h3>Collapse and Expand</h3> 
    <div>Content</div> 
</div> 
<script> 
$("#collapse").accordion({ 
    collapsible: true, 
    active: false 
}); 
</script> 

http://jsfiddle.net/MB4ch/1/

Answer 3

tôi muốn làm điều này với nhiều divs, mỗi kích hoạt riêng của họ. Dựa trên câu trả lời của AlienWebguy trên:

HTML

<div> 
    <p class="expand" id="expand-1">more 1...</p> 
</div> 
<div class="expandable" id="expandable-1"> 
    <p>1. This is the content that was hidden before, but now is... Well, visible!"</p> 
</div> 
<div> 
    <p class="expand" id="expand-2">more 2...</p> 
</div> 
<div class="expandable" id="expandable-2"> 
    <p>2. This is the content that was hidden before, but now is... Well, visible!"</p> 
</div> 

Javascript

$('.expand').click(function(){ 
    target_num = $(this).attr('id').split('-')[1]; 
    content_id = '#expandable-'.concat(target_num); 
    $(content_id).slideToggle('fast'); 
}); 

CSS

.expand { 
    font-weight: bold; 
    font-style: italic; 
    font-size: 12px; 
    cursor: pointer; 
} 
.expandable { 
    display:none; 
} 
div { 
    margin: 10px; 
} 

https://jsfiddle.net/Q4PUw/3767/

Answer 4

ý tưởng Xấu với chúng tôi e accordion. Tốt hơn là tạo khối có thể thu gọn của riêng bạn.

Ví dụ:

function InitSpoilBlock(idClicked) 
    { 
     $(idClicked).on('click', function(e){ 
      var textArray = ['blind','slide'];//here you can add other effects 

      var randomEffect = textArray[Math.floor(Math.random()*textArray.length)]; 

      $(e.target).parent().children(".HiderPanel").toggle(randomEffect); 
     }); 
    } 

vì vậy khi bạn viết html ví dụ:

<div class="HiderContainer"> 
    <a href="#" class="Hider">More</a> 
    <div class="HiderPanel"> 
     Spoiled block of html 
    </div> 
</div> 

và sau khi tải trang bạn sẽ gọi

InitSpoilBlock('.Hider'); 

tất cả các khối sẽ có thể sụp đổ và ẩn với hoạt ảnh ngẫu nhiên. Hoặc bạn cũng có thể sử dụng một hình động chính xác.