Home/ Questions/Q 6472527
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T06:21:18+00:00

Im having trouble making 1 mass showhide for multiple documents. This showhide must be

  • 0

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:#0033CC;
    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');                                            

});

});

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0