Home/ Questions/Q 8349381
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T07:58:46+00:00

I was playing around with this code: http://jsfiddle.net/VmVAq/ As you can see, on page

  • 0

I was playing around with this code:
http://jsfiddle.net/VmVAq/

As you can see, on page load, only DIV 1 is displayed. And as you can notice, the styling is inline so I decided to add it to the header:
http://jsfiddle.net/Ym96t/2/

This is where the problem is. Now on page load, all the DIVs are displayed, why? How did I break the code?

In case you want to review the code here:

Original:

<html>
<head>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript">
function showonlyone(thechosenone) {
     $('.newboxes').each(function(index) {
          if ($(this).attr("id") == thechosenone) {
               $(this).show(200);
          }
          else {
               $(this).hide(600);
          }
     });
}
</script>

</head>

<body>

             <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
                <a id="myHeader1" href="javascript:showonlyone('newboxes1');" >show this one only</a>
             </div>
             <div class="newboxes" id="newboxes1" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px; width: 150px;">Div #1</div>


             <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
                <a id="myHeader2" href="javascript:showonlyone('newboxes2');" >show this one only</a>
             </div>
             <div class="newboxes" id="newboxes2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #2</div>

             <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
                <a id="myHeader3" href="javascript:showonlyone('newboxes3');" >show this one only</a>
             </div>
             <div class="newboxes" id="newboxes3" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #3</div>

</body>
</html>

Styled:

<html>
<head>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript">
function showonlyone(thechosenone) {
     $('.newboxes').each(function(index) {
          if ($(this).attr("id") == thechosenone) {
               $(this).show(200);
          }
          else {
               $(this).hide(600);
          }
     });
}
</script>

<style>
    #scoopout {
        border: 1px solid blue;
    background-color: #99CCFF;
    padding: 5px;
    width: 150px;
    }
</style>

</head>

<body>

             <div id="scoopout">
                <a id="myHeader1" href="javascript:showonlyone('newboxes1');" >show this one only</a>
             </div>
             <div class="newboxes" id="newboxes1">Div #1</div>


             <div id="scoopout">
                <a id="myHeader2" href="javascript:showonlyone('newboxes2');" >show this one only</a>
             </div>
             <div class="newboxes" id="newboxes2">Div #2</div>

             <div id="scoopout">
                <a id="myHeader3" href="javascript:showonlyone('newboxes3');" >show this one only</a>
             </div>
             <div class="newboxes" id="newboxes3">Div #3</div>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Ok, I’ve rewritten your fiddle, and even though you’ve accepted an answer, it might prove helpful in the future.

    First thing you need to know is that functions in JS are objects, so you can set properties. Doing this enables you to track which element is visible at any given time, without the need for evil globals, or unbinding and rebinding your events and using closures. I’m guessing you have heard of them, but there somewhat unfamiliar territory, judging by your code.

    The next thing I did was identify all the clickable elements, hide the “secret” divs, and attach a click event to your links (using the reveal class). Then, I assign a reference to the element that has been made visible, so you can hide it again on a next click event.

    Since you’re using jquery 1.4.4 (time for an upgrade I’d say), I kept it quite simple:

    a working fiddle

    The code here, for remarks/questions: comments are welcome

    $(document).ready(function()
{//All this code will be executed when the page has loaded
    $('.newboxes').each(function()
    {
       $(this).hide(); 
    });
    $('.reveal').click(function showOne()
    {
       if (showOne.visible && showOne.visible.hide)
       {
           showOne.visible.hide(600);
       }
       if (showOne.visible && showOne.visible.attr('id').replace('newboxes','myHeader') === $(tihs).attr('id'))
       {
           showOne.visible = undefined;//set to undefined, otherwise the next click will try to hide the hidden div
           return;//stop here, don't invoke show method
       }
       showOne.visible = $('#'+$(this).attr('id').replace('myHeader','newboxes'));
       showOne.visible.show(200);
    });
    $('#myHeader1').click();//show the first div on page load
});//anything after this will be run as soon as possible, likely before the page loads
    • 0