javascript - jQuery Simple Collapsible Div? - Stack Overflow

admin管理员组

文章数量:1145686

I am looking for the proper, simple, small code to do the following things:

• Click on Element with Class Applied to it.

• DIV.CLASS - Which expands and shows hidden content. (slideDown - Toggle)

• DIV.CLASS - Which collapses and hides the previously show content. (slideUp - Toggle)

<div class="sitesection">
    <p class="expand-one"><a href="#">Click Here To Display The Content</a> <img src="images/arrow.png" width="5" height="7" /></p>
    <p class="content-one">This is the content that was hidden before, but now is... Well, visible!"</p>
</div>

So to be vague and easy, I need to know how to get a DIV CLASS to become hidden and visible once an element on the same page has a CLASS applied to it, in which would activate and deactivate the HIDDEN and or VISIBLE HTML Content. And I need it to be hidden by default.

I have looked all over the internet and have only found very complex scripts, but nothing simple. I have found Simple Accordians... But those never close, they just open another one.

I am looking for the proper, simple, small code to do the following things:

• Click on Element with Class Applied to it.

• DIV.CLASS - Which expands and shows hidden content. (slideDown - Toggle)

• DIV.CLASS - Which collapses and hides the previously show content. (slideUp - Toggle)

<div class="sitesection">
    <p class="expand-one"><a href="#">Click Here To Display The Content</a> <img src="images/arrow.png" width="5" height="7" /></p>
    <p class="content-one">This is the content that was hidden before, but now is... Well, visible!"</p>
</div>

So to be vague and easy, I need to know how to get a DIV CLASS to become hidden and visible once an element on the same page has a CLASS applied to it, in which would activate and deactivate the HIDDEN and or VISIBLE HTML Content. And I need it to be hidden by default.

I have looked all over the internet and have only found very complex scripts, but nothing simple. I have found Simple Accordians... But those never close, they just open another one.

• javascript
• html
• jquery

Share Improve this question Follow edited Nov 21, 2022 at 7:14 starball 49.5k2828 gold badges197197 silver badges866866 bronze badges asked Dec 13, 2011 at 19:50 Aaron BrewerAaron Brewer 3,6671818 gold badges5050 silver badges7878 bronze badges

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 70

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

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

I was looking at this and wanted a collapsible div that was already styled for me. Then I realized what I wanted was a single pane 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/

I wanted to do this with multiple divs, each with their own trigger. Building on AlienWebguy's answer above:

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/

Bad idea to use accordion. Better is to create your own collapsible block.

Example:

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);
        });
    }

so when you write such html:

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

and after page load you will call

InitSpoilBlock('.Hider');

all blocks will be possible to collapse and hide with random animation. Or you can use one exact animation also.

本文标签： javascriptjQuery Simple Collapsible DivStack Overflow