Bold text for selected item collapsible panel

**digioz** · Nov 15, 2008, 10:33

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>&nbsp;&nbsp;</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>&nbsp;&nbsp;
  </li>

  <div id="PanelDetails_2" style="display:none">
  <blockquote>
  Detail description for item 2.
  </blockquote>
  </div>
 </ul>
</body>
</html>

Any help would be much appreciated.

Thanks,
Pete

**ZefQ** · Nov 15, 2008, 11:17

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

**digioz** · Nov 15, 2008, 11:27

Originally Posted by ZefQ

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

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>&nbsp;&nbsp;</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>&nbsp;&nbsp;
  </li>

  <div id="PanelDetails_2" style="display:none">
  <blockquote>
  Detail description for item 2.
  </blockquote>
  </div>
 </ul>
</body>
</html>

**ZefQ** · Nov 15, 2008, 11:58

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

**digioz** · Nov 15, 2008, 12:15

Originally Posted by ZefQ

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

You are correct again. I changed the cursor to:

Code:

style.cursor='pointer'

Now it works in Firefox, Safari and Google Chrome as well.

Pete

The SitePoint Forums have moved.

User Tag List

Thread: Bold text for selected item collapsible panel

Thread Tools

Display

Bold text for selected item collapsible panel

Bookmarks

Bookmarks

Posting Permissions