Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    Regular Coder
    Join Date
    Dec 2009
    Location
    Hong Kong
    Posts
    119
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Collapsible List in HTML With CSS - need help

    It's a little embarrassing, I am more into php and lack the deeper HTML and CSS knowledge.

    I want to do a collapsible list in HTML with CSS, and a very simple one, just text. I found that good link:

    How to Make a Collapsible List in HTML Without Java: 9 Steps

    Here is the basic code:

    Code:
    <style type="text/css">
     .row { vertical-align: top; height:auto !important; }
     .list {display:none; }
     .show {display: none; }
     .hide:target + .show {display: inline; }
     .hide:target {display: none; }
     .hide:target ~ .list {display:inline; }
     @media print { .hide, .show { display: none; } }
     </style>
    
    <div class="row">
     <a href="#hide1" class="hide" id="hide1">Expand</a>
     <a href="#show1" class="show" id="show1">Collapse</a>
     <div class="list">
     <ul>
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
     </ul>
     </div>
     </div>
    That's for a left frame and I am clear how to add links to "Item 1" and open the link in target="base". My question is:

    How can I open a link to "Expand" and open something in target="base" ?


    Update:

    This works:

    PHP Code:
    // From:

     
    <a href="#hide1" class="hide" id="hide1">Expand</a>

    //To:

     
    <a href="#hide1" onclick="window.top.frames['base'].location.href='pvc.htm'" class="hide" id="hide1">Expand</a
    Last edited by fail; 04-09-2014 at 03:14 AM.


 

Posting Permissions

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