Div按钮切换div-Javascript / CSS

Question

I'm trying to add a "back button" which will toggle the current div to the previous div. Basically, I have a div of an Oklahoma map which fills the window. When the user clicks a certain area of the map, the div is toggled with a div that is the image of the "zoomed-in" area which they selected. I want my back button to appear on top of this zoomed-in div, in the bottom right corner, and if the user clicks the button, the div will be toggled with the original Oklahoma map div.

Here's the code I've tried so far:

CSS:

#backButton
{
    position:absolute;
    bottom:50px;
    right:50px;
    background:url('images/backspace.png');
    background-repeat:no-repeat;
    z-index:2;
    height:50px;
    width:50px;
}
.button
{
    position:absolute;
    bottom:100px;
    right:100px;
    background:url('images/backspace.png');
    background-repeat:no-repeat;
    z-index:2;
    cursor:pointer;
}

HTML:

<div id="backButton" style="display:none; background:url('images/backspace.png');" onClick="#container.toggle();">
    <div class="button"></div>
</div>

---

The button appears correctly, but it isn't functioning. I'm sure it has to do with onClick="#container.toggle();" but I don't know how to do it correctly.

Just for background information, the container is the original Oklahoma map and it is toggled off in my JS code ( $("#container").toggle(); ) when I switch to a zoomed-in div.

EDIT: Ok, so I do have Jquery and I tried making a click event like my other toggle events:

 $("#backButton").click(function(e)
{
    $("#container").toggle();
            $("#backButton").toggle();
});

--> I removed the onClick part in the div. The button will toggle off when I click it, but the container div (Oklahoma map) is not toggling back on.

Answer 1

You want your onClick method to call a valid function such as abcMethod() . (Wherever your toggle code lives).

Answer 2

As you are using jQuery (evident in your code)

Put this in your javascript:

$("#button").click(function(){
  $("#backButton").toggle();// hide the div (assume you have it turned on somewhere
  $("#container").toggle();) // show the other div
});

remove the onClick="#container.toggle();" from the markup