open table on click of a button

Discussion in 'HTML & Website Design' started by finaldestination, May 23, 2006.

0
  1. #1
    i want to do something like this...


    on clicking tit shd change to


     
    finaldestination, May 23, 2006 IP
  2. finaldestination

    finaldestination Guest

    Messages:
    212
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    something like the arrow buuton on the main page of dp forums which let you minimize and expand the forum of choice....

    what is it done using Java script or DHTML?

    do u have any resources/ebook/sites which can explain me how to do this stuff
     
    finaldestination, May 23, 2006 IP
  3. finaldestination

    finaldestination Guest

    Messages:
    212
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    --------bounce-------
     
    finaldestination, May 24, 2006 IP
  4. ludwig

    ludwig Notable Member

    Messages:
    2,253
    Likes Received:
    66
    Best Answers:
    0
    Trophy Points:
    225
    #4
    ludwig, May 24, 2006 IP
  5. finaldestination

    finaldestination Guest

    Messages:
    212
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #5

    something more like this....
    i want to do some modificaions in phpbb...to make all categories show on page load....

    and when someone clicks on the category, it expands and shows all the forums in it....
     
    finaldestination, May 24, 2006 IP
  6. brian394

    brian394 Well-Known Member

    Messages:
    226
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    108
    #6
    Try this...

    Demo: http://home.earthlink.net/~duhomax/hide_and_show_list.html

    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  <title>Drop Down List Test</title>
  <style type="text/css">
   div#countries { display: none; }
   div#continents { display: none; }
   body { font: 10pt verdana, arial, sans-serif; }
   a.expand { font-size: 8pt; font-weight: bold; }
  </style>
  <script type="text/javascript">
   function show(id) {
    if (document.getElementById) {
     if (document.getElementById(id).style.display != 'block') {
      document.getElementById(id).style.display = 'block';
      document.getElementById(id + '_expand').innerText = 'click here to collapse';
     }
     else {
      document.getElementById(id).style.display = 'none';
      document.getElementById(id + '_expand').innerText = 'click here to expand';
     }
    }
   }
  </script>
 </head>
 <body>
  <p>list of all countries [<a href="javascript:show('countries')" id="countries_expand" class="expand">click here to expand</a>]</p>
  <div id="countries">
   <ol>
    <li>India</li>
    <li>USA</li>
    <li>UK</li>
    <li>Australia</li>
    <li>etc...</li>
   </ol>
  </div>
  <p>list of all continents [<a href="javascript:show('continents')" id="continents_expand" class="expand">click here to expand</a>]</p>
  <div id="continents">
   <ol>
    <li>North America</li>
    <li>South America</li>
    <li>Europe</li>
    <li>Asia</li>
    <li>etc.</li>
   </ol>
  </div>
 </body>
</html>
    Code (markup):
     
    brian394, Jun 3, 2006 IP
    finaldestination likes this.