4

The following function toggles a div when clicked on the relative id. Any way to set it up so that when the page loads, the div being toggled starts out closed?

I dont want them to be seen until clicked on.

Best,

Joey

<script type="text/javascript">
    $(document).ready(function() {
        $("#architects").click(function() {
             $(".exclusive-architects").toggle();
        });
        $("#international").click(function() {
             $(".exclusive-international").toggle();
        });
        $("#designers").click(function() {
             $(".exclusive-designers").toggle();
        });
        $("#historical").click(function() {
             $(".exclusive-historical").toggle();
        });
    });
    </script>
4
  • 2
    Can you provide your html / css? It sounds like you would just have to modify the starting css
    – AJak
    Nov 7, 2012 at 23:21
  • you would be correct, display : none; did the trick. Thanks! Nov 7, 2012 at 23:23
  • @JoeIsaacson AJak is correct it would be better to have them all display:none to start with. That way users with a slow connection do not see them appear when the page loads for 1 second then disappear.
    – Daveo
    Nov 7, 2012 at 23:25
  • I feel stupid to argue about browsers with JS disabled ...anyway right 'cause of that sometimes CSS display:none; is not an option. Nov 7, 2012 at 23:26

4 Answers 4

4

Just hide them on dom ready, like this:

<script type="text/javascript">
    $(document).ready(function() {
        $(".exclusive-architects, .exclusive-international, 
           .exclusive-designers, .exclusive-historical").hide();

        $("#architects").click(function() {
             $(".exclusive-architects").toggle();
        });
        $("#international").click(function() {
             $(".exclusive-international").toggle();
        });
        $("#designers").click(function() {
             $(".exclusive-designers").toggle();
        });
        $("#historical").click(function() {
             $(".exclusive-historical").toggle();
        });
    });
    </script>
1

You should just need to add a display:none to your starting CSS

1
  • <div id="hidden" style="display:none">
    – zerocog
    Feb 24, 2014 at 21:16
1

DEMO

if your HTML looks like this:

<div id="buttons">

    <div>toggle architects</div>
    <div>toggle international</div>
    <div>toggle designers</div>
    <div>toggle historical</div>

</div>

<div class="cont"> architects content </div>
<div class="cont"> international content </div>
<div class="cont"> designers content </div>
<div class="cont"> historical content </div>

Than all you need is:

$('.cont').hide(); // HIDE ALL INITIALLY

$('#buttons div').click(function(){
  $('.cont').eq(  $(this).index()  ).toggle();
});
0
$(function(){ // DOM ready

    $(".exclusive-architects").hide();
    $(".exclusive-international").hide();
    $(".exclusive-designers").hide();
    $(".exclusive-historical").hide();

});

it should work :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.