CODEWITHSUNDEEP
javascriptjqueryhtmlhideshow
Henrik Petterson
Henrik Petterson

Reputation: 7094

Styling makes javascript code not function properly

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>

Upvotes: 0

Views: 427

Answers (2)

Elias Van Ootegem
Elias Van Ootegem

Reputation: 76395

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

Upvotes: 1

Pointy
Pointy

Reputation: 413702

In the first fiddle, you give some of the elements display: none. You don't do that in the second example.

In other words, you did more than just move the style rules to a <style> element — you also got rid of some of the CSS.

You could add a "ready" handler that shows just one.

$(function() { showonlyone('newboxes1'); });

Upvotes: 5

Related Questions