hide/view site content

[dazza12345]

Hi all, I want to be able to hide and show content of my website by clicking on various heading links. i.e. by clickin on a specific heading, the info about that heading will appear under that heading. The content related to the heading is within a <div>.

Has any1 got any javascript code that will hide/show the content of the <div>, depending on how many times the link header is clicked?

Cheers

 

[BennySHS]

Hey,

you could youse a function like this:


function showHide(element) {

obj = document.getElementById(element);

if (obj.style.display == 'none' ||obj.style.display == '' )
obj.style.display = 'block';
else
obj.style.display = 'none';

}

Just give your DIV an ID, and pass this ID to the function.

 

[theniteowl]

What do you mean by "depending on how many times the link header is clicked?" ?

Do you want to do something different it the link is clicked multiple times?

BennySHS's code above will work to toggle the display of an element on if it is currently off or off if it is already on. To use this you need to have an ID tag for the div you want to toggle. In your link you would call the function passing in the ID of the div.

Your onclick would be like:
onclick="showHide('MyDiv');"

Your div
<div id="MyDiv">My data in this div.</div>

In the function you use the value none to hide the div rather than using hidden because a hidden element still takes up the same space on the page that it would if it were visible, while a display set to none will not take up that space.


At my age I still learn something new every day, but I forget two others.

 

[dazza12345]

HI guys, ive got the above working, however ive got a few extensions that id like to make to the code:

1. Id like the menus collapsed when the website is loaded. Ive tried the following, but im getting no luck:

The follwoing code is added to the top of the source file on a page of my web site:

<SCRIPT LANGUAGE="JavaScript">
     document.getElementById(idofadiv).style.display = "none"; 
</SCRIPT>

This does not collapse the menus. Any ideas?

2. When I click on all of the menus on 1 page of my website except 1 -> all menus, except 1 are collapsed.

When I click on one of the buttons under the extended menu, all of the other menus will suddenly become extended. Any ideas how I cna keep the collapsed menus sollapsed while working within the extended menu?

Cheeers

 

[theniteowl]

1. At the time your code to set the display to none is executed the element has not yet been created and so that line of script will cause an error. You can just set the style tag inside that element and set it to hidden so that it defaults that way rather than using javascript to set it after the page is loaded.

2. Can only guess as we have not seen your code.




At my age I still learn something new every day, but I forget two others.

 

[dazza12345]

aspx file:

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <SCRIPT LANGUAGE="JavaScript" SRC="Javascript.js"></SCRIPT>   
    <h2>
    <a href="#" onclick="showorhide('spousedetails');">Marital Status</a></h2>
    <br/>
    <div id=spousedetails style ="display:none;">
    <asp:Button ID="Button1" runat="server" Text="Button" />
    </div> 
</asp:Content>

Javascript.js

function showorhide(id) { 
    if (document.getElementById(id).style.display == "none") 
    {
        document.getElementById(id).style.display = "block";
    } 
    else 
    {
        document.getElementById(id).style.display = "none";
    }

The only thing that should change the state of the div is by clicking the anchor text (in this instance Marital Status). On the first page load, the div should be hidden (this is why I have included style ="display:none;" into the div).

The button has been included to show that the state of the div is changed by something other than a click of the anchor text (Marital Status). i.e. the state is changed by the button click.

I do not want the button click to alter the state, only the anchor text.

Thanks