JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS

Bold text for selected item collapsible panel

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply

•
•
Join Date: May 2005
Posts: 7
Reputation: digioz is an unknown quantity at this point 
Solved Threads: 0
digioz's Avatar
digioz digioz is offline Offline
Newbie Poster

Bold text for selected item collapsible panel

 
0
  #1
Nov 15th, 2008
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:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
  4. <title>Collapsible Panel Test</title>
  5. </head>
  6.  <script language="jscript">
  7.  sel = ''
  8.  
  9.  function show_section(section_id)
  10.  {
  11.  
  12.   if (sel != '')
  13.    {
  14.    ds = document.getElementById(sel)
  15.    ds.style.display = "none"
  16.    }
  17.  
  18.   sel = 'PanelDetails_' + section_id
  19.  
  20.   dt = document.getElementById(sel)
  21.   dt.style.display = ""
  22.  
  23.  }
  24.  
  25.  </script>
  26. </head>
  27. <body class="body">
  28. <b><span id="ctlPageTitle">Collapsible Panel Test</span></b><br />
  29. <br />
  30. <span id="ctlItemSelection">
  31.  <ul class="submenu2">
  32.   <li class="selected">
  33.  
  34.   <span onclick="show_section(1)" onmouseover="style.cursor='hand'">Item 1</span>&nbsp;&nbsp;</li>
  35.  
  36.   <div id="PanelDetails_1" style="display:none">
  37.   <blockquote>
  38.   Detail Description for item 1.
  39.   </blockquote>
  40.   </div>
  41.  
  42.   <li>
  43.   <span onclick="show_section(2)" onmouseover="style.cursor='hand'">Item 2</span>&nbsp;&nbsp;
  44.   </li>
  45.  
  46.   <div id="PanelDetails_2" style="display:none">
  47.   <blockquote>
  48.   Detail description for item 2.
  49.   </blockquote>
  50.   </div>
  51.  </ul>
  52. </body>
  53. </html>

Any help would be much appreciated.

Thanks,
Pete
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 954
Reputation: essential will become famous soon enough essential will become famous soon enough 
Solved Threads: 131
Featured Poster
essential's Avatar
essential essential is offline Offline
Posting Shark

Re: Bold text for selected item collapsible panel

 
0
  #2
Nov 17th, 2008
You may try this code, i've done a lite modification over you script. Hope you find it useful...

javascript Syntax (Toggle Plain Text) 
  1. <html> 
  2. <head> 
  3. <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> 
  4. <title>Collapsible Panel Test</title>
  5. <style type="text/css">
  6. <!--
  7. body {
  8.     font: 70%/1.5em Arial, sans-serif;
  9.     color: #696969;
  10.     text-align: left;
  11. }
  12. h3 {
  13.     font: 700 16px Arial;
  14.     color: #181818;
  15. }
  16. ul {
  17.     list-style-type: none;
  18.     margin: 10px 0 0 5px;
  19. }
  20. li {
  21.     font: 500 13px Arial;
  22.     color: MidnightBlue;
  23.     padding: 3px 0 15px 0;
  24. }
  25. li.selected {
  26.     font: 700 13px Arial;
  27.     color: Orange;
  28. }
  29. blockquote {
  30.     margin: 0 0 5px;
  31.     padding: 7px;
  32.     font: 900 15px Georgia, "Times New Roman", Times, serif;
  33.     width: 200px;
  34.     height: auto;
  35.     border-style: dashed;
  36.     border-width: 1px;
  37.     border-size: 2px;
  38.     border-color: white;
  39.     background-color: #000;
  40.     color: white;
  41.     text-align: left;
  42.     letter-spacing: 3px;
  43. }
  44. .hide {
  45.     display: none;
  46. }
  47. .show {
  48.     display: normal;
  49. }
  50. -->
  51. </style>
  52. <script type="text/javascript">
  53. <!--
  54. function toggle() 
  55. {
  56. items = document.getElementsByTagName('ul')[0].getElementsByTagName('li');
  57.  
  58. details = document.getElementsByTagName('ul')[0].getElementsByTagName('blockquote');
  59.  
  60. for (var i = 0; i <= items.length; i++) { 
  61. items[i].onclick = function() {
  62. for (var x = 0; x <= items.length; x++) {
  63. if ( items[x].className == 'selected' ) { items[x].className = ''; }
  64. this.className = 'selected'; 
  65. if ( details[x].className == 'show' ) { details[x].className = 'hide'; }
  66. if ( items[0].className == 'selected' ) { details[0].className = 'show'; }
  67. else if ( items[1].className == 'selected' ) { details[1].className = 'show'; }
  68. else { details[2].className = 'show'; 
  69.             }
  70.          } 
  71.       }
  72.    }  
  73. }
  74.  
  75. window.onload = toggle;
  76. //-->
  77. </script> 
  78. </head> 
  79. </head> 
  80. <body>
  81. <h3>Collapsible Panel Test</h3> 
  82. <ul> 
  83. <li> 
  84. Item 1&nbsp;&nbsp;</li> 
  85. <blockquote class="hide"> Detail Description for item 1. </blockquote> 
  86. <li>Item 2&nbsp;&nbsp; </li> 
  87. <blockquote class="hide"> Detail description for item 2. </blockquote>
  88.  <li>Item 3&nbsp;&nbsp; </li> 
  89. <blockquote class="hide"> Detail description for item 3. </blockquote>
  90. </ul> 
  91. </body> 
  92. </html>
Last edited by essential; Nov 17th, 2008 at 3:36 am.
Reply With Quote Quick reply to this message  
•
•
Join Date: May 2005
Posts: 7
Reputation: digioz is an unknown quantity at this point 
Solved Threads: 0
digioz's Avatar
digioz digioz is offline Offline
Newbie Poster

Re: Bold text for selected item collapsible panel

 
0
  #3
Nov 17th, 2008
•
•
•
•
Originally Posted by essential View Post
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
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



acid2 ajax ajaxcode ajaxexample ajaxhelp ajaxjspservlets animate array automatically beta box browser bug calendar captchaformproblem cart close codes column cookies css date debugger decimal dependent design disablefirebug dom download element embed engine enter error events ext file firefox focus form frameworks getselection google gwt gxt hiddenvalue highlightedword hint html htmlform ie7 iframe index java javascript javascripthelp2020 jawascriptruntimeerror jquery jsp libcurl listbox maps masterpage media menu microsoft mimic mp4 onmouseoutdivproblem onmouseover paypal pdf php player position post problem programming prototype redirect regex safari scale scriptlets scroll search security select software sql text textarea toggle unicode variables w3c website window windowofwords windowsxp
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC