View Full Version : onclick show/hide divs

07-28-2009, 05:41 PM
I've lost count of the scripts I've been through trying to find what I'm after and my kindergarten Javascript just isn't up to this.

I have a calendar with linked dates which, when onclick is activated, unhide a div further down the page which has content telling the user what's happening on that day. So far so good.

What I can't find the solution for is this. When the user clicks on another date, I want the content div for the new date to REPLACE the div containing the content for the first date WITHOUT the user having to click on anything to turn the visible state for the first date off first. In other words, the onclick event needs to restore the first div to its default display:none state as well as changing the state of the new date's div to visible.

I would like the page to load with no content displayed for any of the dates, so the first date clicked will not have any content to hide before it's displayed. I'm guessing the function code might need to take account of that?

Can anyone help me out here?

07-28-2009, 07:20 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<style type="text/css">
#tst DIV{

<script type="text/javascript">

var Lst=false;

function Div(id){
if (Lst)Lst.style.display='none';

<a onclick="Div('d1')" >Div d1</a>
<a onclick="Div('d2')" >Div d2</a>

<div id="tst">
<div id="d1" >d1</div>
<div id="d2" >d2</div>


07-28-2009, 07:59 PM
Cool. Many thanks Vic. That's much more elegant than a solution I found (http://www.visibilityinherit.com/code/swap-panels.php) in the meantime. :thumbsup: