Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Exapand/collapse Div's in html

Posted on 2012-04-12
6
Medium Priority
?
197 Views
Last Modified: 2012-04-13
Hi,
  How can I implement expand/collpase panels using div's. I don't want to install any active-x controls. I want to implement something like shown in the image. Please help me how can I do it.

Thank you
expand-collpase.png
0
Comment
Question by:Sthokala
6 Comments
 
LVL 6

Expert Comment

by:bartvd
ID: 37839572
Hide the div:

div.style.display = "none";

Expand the div:

div.style.display = "block";
0
 
LVL 20

Expert Comment

by:BuggyCoder
ID: 37839746
0
 
LVL 20

Expert Comment

by:Proculopsis
ID: 37841261
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 7

Expert Comment

by:Atique Ansari
ID: 37841397
YOu can use jquery's slideToggle() function on div's click event.
0
 

Author Comment

by:Sthokala
ID: 37843034
Thank you for your answers. The code given is for horizontal panels..but I want the code to the two vertical panels. my question here is how can I insert an image in between two panels. please let me know.

Thank you
0
 
LVL 18

Accepted Solution

by:
nap0leon earned 2000 total points
ID: 37843415
The panel layouts can be whatever you want.  In this example, they are named "left", "middle", and "right", but you can easily update the styles to make them "top", "middle", and "bottom" if you want...

All that is missing is that you place your image inside the div with id=middle (or set the image as middle's background) - whatever you prefer.

<script>
function toggleMiddle(){
	(document.getElementById('middle').style.display=='inline') ? document.getElementById('middle').style.display='none' : document.getElementById('middle').style.display='inline';
}
</script>
<style>
#left {border:1px solid black; height:300px; width:200px; float:left;}
#middle {border:1px solid black; height:300px; width:200px; float:left; display:none;}
#right {border:1px solid black; height:300px; width:200px; float:left;}
</style>
<div id="left">Left</div>
<div id="middle"></div>
<div id="right">Right</div>
<input type="button" onclick="toggleMiddle()">Toggle Middle DIV</input>

Open in new window

0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
This article discusses how to implement server side field validation and display customized error messages to the client.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Suggested Courses

971 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question