Home/ Questions/Q 4320866
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-21T08:40:50+00:00

I’m very new with Javascript. I’m trying to do something with Show/Hide functions. html:

  • 0

I’m very new with Javascript.

I’m trying to do something with Show/Hide functions.

html:

<html>
 <head>
  <title> New Document </title>

<style>
#button01 {
 width:100px;
 height:50px;
 margin:10px;
 padding:6px 0 0 0;
 background-color:#f0f0f0;
}

#button01:hover {
 background-color:#ffcccc;
}

#button01 a {
 display:block;
 width:40px;
 height:40px;
 margin:auto;
 background:url("button01.png")
}

#button01 a:hover {
 width:40px;
 height:40px;
 background:url("button01-hover.png")
}

#hidden01 {
 display:none;
 width:300px;
 height:200px;
 margin:0 0 10px 0;
 border:4px solid #ffcccc;
}

#button02 {
 width:100px;
 height:50px;
 margin:10px;
 padding:6px 0 0 0;
 background-color:#f0f0f0;
}

#button02:hover {
 background-color:#cccccc;
}

#button02 a {
 display:block;
 width:40px;
 height:40px;
 margin:auto;
 background:url("button02.png")
}

#button02 a:hover {
 width:40px;
 height:40px;
 background:url("button02-hover.png")
}

#hidden02 {
 display:none;
 width:300px;
 height:200px;
 margin:0 0 10px 0;
 border:4px solid #cccccc;
}
</style>




 </head>

 <body>



<div style="width:300px;">
<div id="button01"><a href="#" onclick="toggle(0);return false"></a></div>


<div id="button02"><a href="#" onclick="toggle(1);return false"></a></div>
</div>

<div id="hidden01">&nbsp;</div>
<div id="hidden02">&nbsp;</div>


 </body>
</html>

script:

        function toggle(offset){
            var i, x;
            var stuff = Array('hidden01', 'hidden02');  //put all the id's of the divs here in order 
            for (i = 0; i < stuff.length; i++){  //hide all the divs
                  x = document.getElementById(stuff[i]);
                  x.style.display = "none";
            }
            // now make the target div visible
            x = document.getElementById(stuff[offset]);
            x.style.display = "block";
         window.onload = function(){toggle(0);}
        }

That’s working, but I want to fix 2 things:

1- Close/Hide hidden divs if I click on it’s corresponding button;

2- After clicking a button, fix hover button image. If click again unfix;

I’ve tried almost all the scripts posted and can not find a solution. I don’t want to open the divs at same time.
If opens one, close the others.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You’re using jQuery, so use jQuery.

    $(function() {

    function toggle(offset) {
        $('div[id^=hidden]').hide().eq(offset).show();
    }

    toggle(0);
});

    I don’t know what you mean by the two things you want to fix, however. Please clarify.

    Edit

    Okay, I see what you’re going for now. I’ve cleaned up your code a lot.

    HTML

    <div style="width:300px;">
    <div id="button1"><a></a></div>
    <div id="button2"><a></a></div>
</div>

<div id="hidden1">&nbsp;</div>
<div id="hidden2">&nbsp;</div>

    CSS

    #button1, #button2 {
    width:100px;
    height:50px;
    margin:10px;
    padding:6px 0 0 0;
    background-color:#f0f0f0;
}

#button1:hover {
    background-color:#fcc;
}

#button2:hover {
    background-color:#ccc;
}

#button1 a, #button2 a {
    display:block;
    width:40px;
    height:40px;
    margin:auto;
}

#button1 a {
    background:url(http://lorempixum.com/40/40?1)
}

#button2 a {
    background:url(http://lorempixum.com/40/40?3)
}

#button1 a:hover, #button1.hover a {
    background:url(http://lorempixum.com/40/40?2)
}

#button2 a:hover, #button2.hover a {
    background:url(http://lorempixum.com/40/40?4)
}

#hidden1, #hidden2 {
    display:none;
    width:300px;
    height:200px;
    margin:0 0 10px 0;
    border:4px solid #fcc;
}

    JavaScript

    var $buttons = $('div[id^=button]'),
    $hiddenDivs = $('div[id^=hidden]'),
    HOVER_CLASS = 'hover';

$buttons.live('click', function() {
    var $this = $(this),
        i = $this.index();

    $buttons.removeClass(HOVER_CLASS);
    $this.addClass(HOVER_CLASS);
    $hiddenDivs.hide().eq(i).show();
}).first().click();

    Demo

    Last edit

    Changed JavaScript and CSS. http://jsfiddle.net/mattball/bNCNQ/

    CSS

    #button1:hover a, #button1.hover a {
    background:url(...)
}

#button2:hover a, #button2.hover a {
    background:url(...)
}

    JS

    $buttons.live('click', function () {
    var $this = $(this),
        i = $this.index(),
        show = !$this.hasClass(HOVER_CLASS);

    $buttons.removeClass(HOVER_CLASS);
    $this.toggleClass(HOVER_CLASS, show);
    $hiddenDivs.hide().eq(i).toggle(show);
});
    • 0