Bold text for selected item collapsible panel

Discussion in 'JavaScript' started by digioz, Nov 15, 2008.

0
  1. #1
    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>
<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>
    HTML:
    Any help would be much appreciated.

    Thanks,
    Pete
     
    digioz, Nov 15, 2008 IP
  2. GreatMetro

    GreatMetro Peon

    Messages:
    117
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I can't imagine how this is working for you as you have a ton of mistakes... namely, two closing head tags, no semicolons at the end of your statements, etc...

    There's a much better way of doing what you need to do, but since it appears you are learning here's how to bold your LI elements when you click on them.


    <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Collapsible Panel Test</title>
 <script type="text/javascript">
 sel = '';

 function show_section(section_id,header_id)
 {

  if (sel != '')
   {
   ds = document.getElementById(sel);
   ds.style.display = "none";
   }

  sel = 'PanelDetails_' + section_id;

  dt = document.getElementById(sel);
  dt.style.display = "";
  
  document.getElementById('item_1').style.fontWeight = "Normal";
  document.getElementById('item_2').style.fontWeight = "Normal";
  document.getElementById(header_id).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.id)" onmouseover="style.cursor='hand'" id="item_1">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.id)" onmouseover="style.cursor='hand'" id="item_2">Item 2</span>&nbsp;&nbsp;
  </li>

  <div id="PanelDetails_2" style="display:none">
  <blockquote>
  Detail description for item 2.
  </blockquote>
  </div>
 </ul>
</body>
</html>
    Code (markup):
     
    GreatMetro, Nov 22, 2008 IP