Expand and close div's using Javascript

Hi,

Help with this code pls...

I ve a javascript which expands a div onclick.

Expand|Select|Wrap|Line Numbers

 
 <script language="javascript" type="text/javascript">

     <!--

        function show_hide(obj) { 

        var el = document.getElementById(obj); 

        if ( el.style.display != 'none' ) { 

        el.style.display = 'none'; 

        } 

        else { 

        el.style.display = ''; 

        } 

        } 
 
    // -->

    </script>

I have a page with Content list on the left, When clicked on the content name, its description expands on the right.

I am using the above javascript to do the same

But the problem is,
When u click a content its description expands, then when u click the next content even its description expands. But t previous one doesn't collapse.

Pls help me how to just show one div content at a time

Many Thanks
Bh

Sep 25 '08 #1

Subscribe Post Reply

2767

pronerd

392

Expert 256MB

Since your question relates to the code calling this function it would be better to provide that code instead. Are you making a second call to the function you provided to collapse that other layers?

Sep 25 '08 #2

Rsmastermind

Please post the Html on which you are opertating this javascript.
One more thing you have written in the else part like this.

Expand|Select|Wrap|Line Numbers

 else { 

el.style.display = ''; 

}

you can write in this way

Expand|Select|Wrap|Line Numbers

 else { 

el.style.display = 'block'; //this will enable the container

}

Sep 26 '08 #3

Bhavs

My Html Code looks like this:

<a class="yellow" href="javascript: show_hide(region1Div)">Region1</a>
<a class="yellow" href="javascript: show_hide(region2Div)">Region2</a>
<a class="yellow" href="javascript: show_hide(region3Div)">Region3</a>

<div id="region1Div" visible="false" style=" display: none ">
Content 1
</div>

<div id="region2Div" visible="false" style=" display: none ">
Content 2
</div>
.
.
.
.

I am not using a second call to the function to collapse other layers
I Know i need to use an array for that. But I am not sure how to write it in a javascript.
Pls Help...

Thanks..
Bh

Sep 26 '08 #4

Rsmastermind

This is the code which will function well check this it is tested and executed already

Expand|Select|Wrap|Line Numbers

 <html><body>

<a id="region1Div" class="yellow" href="javascript: show_hide(this)">Region1</a> 

<a id="region2Div" class="yellow" href="javascript: show_hide(this)">Region2</a>

<a id="region3Div" class="yellow" href="javascript: show_hide(this)">Region3</a>
 
//In the above code I had mentioned the id of the hyperlinks as same as they correspond to the div like for first link first div 
 
<div id="region1Div" visible="false" style=" display: none "> 

Content 1

</div>
 
<div id="region2Div" visible="false" style=" display: none "> 

Content 2

</div>
 
<div id="region3Div" visible="false" style=" display: none "> 

Content 3

</div>

</body></html>
 
function show_hide(that)

{

var links=that.id;

var allDivs=document.getElementsByTagName("DIV");

var divLength=allDivs.length;
 
for(i=0;i<divLength;i++){
 
var TheDiv=allDivs[i];

if(links==TheDiv.id){TheDiv.style.display='block';}

else{allDivs[i].style.display='none';}

                              }
 
}

Sep 26 '08 #5

Similar topics

Expand/Collapse DIVS

by: James Hurrell | last post by:

Hi, I'm using the following javascript function to expand and collapse portions of text in a web page (targeted at IE5.5 and above): function doExpand(paraNum,arrowNum) { if...

Javascript

Expand/collapse blocks of divs in a page

by: sam | last post by:

Hi all, I have a series of divs in 2 blocks say BLOCK1 and BLOCK2 and I want to use one click to expand/collapse all those in each block. But the code I came up with exapands all the divs in the...

Javascript

Help needed for a expand-collapse menu

by: Rabel | last post by:

I am not very good at javascript I mostly am a flash developer but I am trying to apply one of our old expanding menus to work for a new site but it doesn't collapse the way I need it to right now...

Javascript

contract and expand menus based on the previous state

by: Nospam | last post by:

I don't know what it is I am doing wrong, I am trying to get the menus to either expand or contract based on their previous states, i.e if already expanded if clicked again contract, and if...

Javascript

Liquid tableless layout, height difficulties (expand OK, shrink not OK)

by: ge5talt | last post by:

Longtime reader, 1st time poster :) I am in the process of overhauling a website and replacing an old table-based quirksmode layout with a standards-mode tableless one. I am currently working on...

HTML / CSS

Need help with expand collapse part of displaying text

by: raknin | last post by:

Hi, I am new to the javascript and the ajax. I want to create a text and expand and collapsonly part of it . Something similar to what is done in youtube., I have this code. <!DOCTYPE HTML...

Javascript

Prevent TreeView PostBack When Click the Little Plus Sign (expand)

by: pbd22 | last post by:

Hi. Can somebody tell me how to prevent a postback when I click on the little "plus" sign next to the treenode's root folder? It postbacks and I have to restart a video stream coming to the...

ASP.NET

How to expand a row??

by: chotu99 | last post by:

I have a table in which there are several rows , I would like to know how to expand a row when mouse moves over that particular row and give some description about and gets back to normal when mouse...

Javascript

Auto expand the grid upon search... - HIGH PRIORITY

by: dorandoran | last post by:

I used this article (http://www.codeproject.com/KB/webforms/EditNestedGridView.aspx) to accomplish expand/collaspe grid. I also added a search and it works. but i need to be now automatically expand...

ASP.NET

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice