i want an example like there would be four list option and on click any of this option panel should toggle individual. for example in this site (Stack Overflow) You can sea left top option "Stack Exchange" when we click on "StackExchange" a panel is appeared. my requirement is same like this but with four option's ... {}Like this sitethere is three option message , friend request, and notification please any body help me...!!! thanks.<%@ page language="java" contentType="text/html; charset=ISO-8859-1"pageEncoding="ISO-8859-1"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>Head Menu Div</title><link href="http://stackoverflow.com/questions/14497800/HeadMenuDiv.css" type="text/css" rel="stylesheet" /><script type="text/javascript" src="http://stackoverflow.com/questions/14497800/jquery.js"></script><script type="text/javascript">$(document).ready(function(){ //hide the all of the element with class msg_body $(".msg_body").hide(); //toggle the componenet with class msg_body $(".msg_head").click(function(){ $(this).next(".msg_body").slideToggle(500); }); }); </script></head><body> <div id="Menu"> <div id="LeftMenu"> <ul> <li class="msg_list"> <img src="http://stackoverflow.com/questions/14497800/BPHello.png" height="20" width="25" alt="" class="msg_head"/> <div class="msg_body"> shankar verma shankar verma shankar verma. </div> </li> <li class="msg_list"> <img src="http://stackoverflow.com/questions/14497800/BPHello.png" height="20" width="25" alt="" class="msg_head"/> <div class="msg_body"> shankar verma shankar verma shankar verma. </div> </li> <li class="msg_list"> <img src="http://stackoverflow.com/questions/14497800/BPHello.png" height="20" width="25" alt="" class="msg_head"/> <div class="msg_body"> shankar verma shankar verma shankar verma. </div> </li> <li class="msg_list"> <img src="http://stackoverflow.com/questions/14497800/BPHello.png" height="20" width="25" alt="" class="msg_head"/> <div class="msg_body"> shankar verma shankar verma shankar verma. </div> </li> </div></body></html>i have used a jquery... and an external css for arranging these four link in horizontal manner... but when i click on one img link one panel apear and another img link's are goes disturb.. so how i can toggle four different panel without disturbing another link...thanks
how to create a list of four option to show pannel toggling on each option click
- Thread starter Aaronw120
- Start date