Member Avatar for digioz

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>

Any help would be much appreciated.

Thanks,
Pete

  • 2 Contributors
  • 2 Replies
  • 174 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by digioz
Member Avatar for essential

You may try this code, i've done a lite modification over you script. Hope you find it useful...

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> 
<title>Collapsible Panel Test</title>
<style type="text/css">
<!--
body {
    font: 70%/1.5em Arial, sans-serif;
    color: #696969;
    text-align: left;
}
h3 {
    font: 700 16px Arial;
    color: #181818;
}
ul {
    list-style-type: none;
    margin: 10px 0 0 5px;
}
li {
    font: 500 13px Arial;
    color: MidnightBlue;
    padding: 3px 0 15px 0;
}
li.selected {
    font: 700 13px Arial;
    color: Orange;
}
blockquote {
    margin: 0 0 5px;
    padding: 7px;
    font: 900 15px Georgia, "Times New Roman", Times, serif;
    width: 200px;
    height: auto;
    border-style: dashed;
    border-width: 1px;
    border-size: 2px;
    border-color: white;
    background-color: #000;
    color: white;
    text-align: left;
    letter-spacing: 3px;
}
.hide {
    display: none;
}
.show {
    display: normal;
}
-->
</style>
<script type="text/javascript">
<!--
function toggle() 
{
items = document.getElementsByTagName('ul')[0].getElementsByTagName('li');

details = document.getElementsByTagName('ul')[0].getElementsByTagName('blockquote');

for (var i = 0; i <= items.length; i++) { 
items[i].onclick = function() {
for (var x = 0; x <= items.length; x++) {
if ( items[x].className == 'selected' ) { items[x].className = ''; }
this.className = 'selected'; 
if ( details[x].className == 'show' ) { details[x].className = 'hide'; }
if ( items[0].className == 'selected' ) { details[0].className = 'show'; }
else if ( items[1].className == 'selected' ) { details[1].className = 'show'; }
else { details[2].className = 'show'; 
            }
         } 
      }
   }  
}

window.onload = toggle;
//-->
</script> 
</head> 
</head> 
<body>
<h3>Collapsible Panel Test</h3> 
<ul> 
<li> 
Item 1&nbsp;&nbsp;</li> 
<blockquote class="hide"> Detail Description for item 1. </blockquote> 
<li>Item 2&nbsp;&nbsp; </li> 
<blockquote class="hide"> Detail description for item 2. </blockquote>
 <li>Item 3&nbsp;&nbsp; </li> 
<blockquote class="hide"> Detail description for item 3. </blockquote>
</ul> 
</body> 
</html>
Member Avatar for digioz

You may try this code, i've done a lite modification over you script. Hope you find it useful...

Very cool! Thanks for the help.

Pete

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.