JQuery Show Hide showing multiple content_问答_开发者

JQuery Show Hide showing multiple content

开发者 https://www.devze.com 2023-04-02 07:02 出处：网络

Im having trouble making 1 mass showhide for multiple documents.This showhide must be able to contain other elements within it as well, such as ol ul li etc.Currently I\'m having trouble showing the o

Im having trouble making 1 mass showhide for multiple documents. This showhide must be able to contain other elements within it as well, such as ol ul li etc. Currently I'm having trouble showing the other content besides the tag as well as adding another showhide inside of the original show hide

Also to display a box with the content in it.

HTML:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="showhideJQuery.js"></script>
</head>
<style>
.showhide {
    width:500px;
    height:200px;
    margin:1em .5em;
}
.showhide h3 {
    margin: 0;
    padding: .25em;
    background:#00开发者_Go百科33CC;
    border-top:1px solid #666666;
    border-bottom:1px solid #666666;
}
.showhide div {
    padding: .5em .25em;
}
</style>

<body>
<div class="showhide">
    <h3>Title 1</h3>
    <div>
        <ol>
            <li>Hey!</li>
            <div class="showhide">
                <h3>Another one?!</h3>
                <div>YES!</div>
            </div>
        </ol>
    </div>

</div>
</body>
</html>

JQuery

$(document).ready(function(){
$('div.showhide:eq(0)> div').hide();
$('div.showhide:eq(0)> h3').click(function() { 
    $(this).next().slideToggle('fast');                                            

});

});

I hope this is what you are looking for.

Working demo

$(function(){
    $('div.showhide > div').hide();
    $('div.showhide > h3').click(function() { 
        $(this).next().slideToggle('fast');                                        });
});

By adding class attributes to the item you want to trigger the show/hide and the element you want shown / hidden you can do something like this:

HTML:

<body>
<div class="showhide">
    <h3 class="showhideclick">Title 1</h3>
    <div class="showhidecontainer">
        <ol>
            <li>Hey!</li>
            <div class="showhide">
                <h3 class="showhideclick">Another one?!</h3>
                <div class="showhidecontainer">YES!</div>
            </div>
        </ol>
    </div>

</div>
</body>

JS:

$(document).ready(function(){
    $('.showhidecontainer').hide();
    $('.showhideclick').click(function() { 
        $(this).next('.showhidecontainer').slideToggle('fast');                                            
    });
});

This also gives you the flexibility to use different elements to contain your hidden content and which element triggers the action.

Hope this helps.

If you get rid of the :eq(0) in your jquery selectors, does it do what you want it to?

$(document).ready(function(){
$('div.showhide > div').hide();
$('div.showhide > h3').click(function() { 
    $(this).next().slideToggle('fast');                   
    }); 
});