SitePoint Sponsor |
|
User Tag List
Results 1 to 5 of 5
-
Nov 15, 2008, 10:33 #1
- Join Date
- Nov 2008
- Location
- Chicago, IL
- Posts
- 3
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Bold text for selected item collapsible panel
Hey all,
I have a very simple collapsible panel which is working fine right now, but I am trying to make the expanded item's text bold "Without doing a post back or use of links". Here is the code:
HTML Code:<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>Collapsible Panel Test</title> </head> <script language="jscript"> sel = '' function show_section(section_id) { if (sel != '') { ds = document.getElementById(sel) ds.style.display = "none" } sel = 'PanelDetails_' + section_id dt = document.getElementById(sel) dt.style.display = "" } </script> </head> <body class="body"> <b><span id="ctlPageTitle">Collapsible Panel Test</span></b><br /> <br /> <span id="ctlItemSelection"> <ul class="submenu2"> <li class="selected"> <span onclick="show_section(1)" onmouseover="style.cursor='hand'">Item 1</span> </li> <div id="PanelDetails_1" style="display:none"> <blockquote> Detail Description for item 1. </blockquote> </div> <li> <span onclick="show_section(2)" onmouseover="style.cursor='hand'">Item 2</span> </li> <div id="PanelDetails_2" style="display:none"> <blockquote> Detail description for item 2. </blockquote> </div> </ul> </body> </html>
Thanks,
Pete
-
Nov 15, 2008, 11:17 #2
- Join Date
- Nov 2008
- Location
- Sweden
- Posts
- 70
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
dont know what you want. if its the menu headTitle you want bald or the items with in
if its the 2 one its easy just ad
dt.style.fontWeight="bold";
if its the other one let me know
-
Nov 15, 2008, 11:27 #3
- Join Date
- Nov 2008
- Location
- Chicago, IL
- Posts
- 3
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks! Here is the final solution:
Code:<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>Collapsible Panel Test</title> </head> <script language="jscript"> var sel=null; function show_section(section_id,obj) { if (sel) { sel.style.display = "none" sel.obj.style.fontWeight='normal'; } sel = document.getElementById('PanelDetails_' + section_id); sel.style.display = ""; sel.obj=obj; sel.obj.style.fontWeight='bold'; } </script> </head> <body class="body"> <b><span id="ctlPageTitle">Collapsible Panel Test</span></b><br /> <br /> <span id="ctlItemSelection"> <ul class="submenu2"> <li class="selected"> <span onclick="show_section(1,this)" onmouseover="style.cursor='hand'">Item 1</span> </li> <div id="PanelDetails_1" style="display:none;"> <blockquote> Detail Description for item 1. </blockquote> </div> <li> <span onclick="show_section(2,this)" onmouseover="style.cursor='hand'">Item 2</span> </li> <div id="PanelDetails_2" style="display:none"> <blockquote> Detail description for item 2. </blockquote> </div> </ul> </body> </html>
-
Nov 15, 2008, 11:58 #4
- Join Date
- Nov 2008
- Location
- Sweden
- Posts
- 70
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
still there is things wrong with the script it dosent work in firefox, change jscript to javascript
and the way you use cursor i think only forks in IE
-
Nov 15, 2008, 12:15 #5
- Join Date
- Nov 2008
- Location
- Chicago, IL
- Posts
- 3
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Bookmarks