SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Nov 2008
    Location
    Chicago, IL
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question 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>&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. #2
    SitePoint Enthusiast ZefQ's Avatar
    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

  3. #3
    SitePoint Member
    Join Date
    Nov 2008
    Location
    Chicago, IL
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ZefQ View Post
    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>

  4. #4
    SitePoint Enthusiast ZefQ's Avatar
    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

  5. #5
    SitePoint Member
    Join Date
    Nov 2008
    Location
    Chicago, IL
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ZefQ View Post
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •