SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2006
    Location
    Australia
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Clicking link to hide/show data

    (I am sure that my thread title will confuse many)
    Gudday all
    I have been pottering around my wife's site and wish to change a page to 'hide' some content until a user clicks on it or a link, icon etc:

    I am making a stockists page and the amount of stockists that my wife has for her products is increasing (good I know ).
    However it means the content on that page is now such that he user must scroll down a long way and I suspect that some are abandoning ship too early.
    What I would like to have is a list of suburbs under each state, hidden until the user clicks on the state or a little '+' sign or arrow etc: When clicked that state's stockists would be displayed.
    At present I have the following
    HTML Code:
    <h3 style="text-align:left;";>Victoria</h3>
    <table>
    <tr>
    <th colspan="2"><h4 style="text-align:left;";>Berwick</h4></th>
    </tr>
    <tr>
    <th colspan="2">Craft Haven</th>
    </tr>
    <tr>
    <td colspan="2">Craft Haven of Berwick retails an extensive range of 
    patchwork fabrics, teddy bear and doll making supplies, embroidery threads
     and silks ribbons and hobby needs as well as a wide range of giftware</td>
    </tr>
    <tr>
    <td>Address:</td>
    <td>16 Adams Lane, Berwick, Vic, 3806</td>
    </tr>
    <tr>
    <td>Phone:</td>
    <td>(03) 9707 3431 or +61 3 9707 3431</td>
    </tr>
    <tr>
    <td>Fax:</td>
    <td>(03) 9585 1445 or +61 3 9585 1445</td>
    </tr>
    <tr>
    <td>Hours:</td>
    <td>Mon - Fri  9am to 4pm, Sat 9am to 1pm</td>
    </tr>
    <tr>
    <td>Web:</td>
    <td><a class="navlink" href="http://www.crafthaven.com.au/">Craft Haven</a></td>
    </tr>
    <tr>
    <td>E-mail:</td>
    <td><a class="navlink" href="mailto:">E-mail Craft Haven</td>
    </tr>
    <tr>
    <td>Blog:</td>
    <td></td>
    </tr>
    <tr>
    <td>Proprietor:</td>
    <td>Diana Della Bosca and Maria Tierney</td>
    </tr>
    </table>
    
    <table>
    <tr>
    <th colspan="2"><h4 style="text-align:left;";>Lockwood South</h4></th>
    </tr>
    <tr>
    <th colspan="2">Mulberry Lane</th>
    </tr>
    <tr>
    <td colspan="2">Mulberry Lane offers an efficient mail order service for fabrics, 
    precut kits, patterns, books and equipment. Mulberry Lane’s personalised machine quilting 
    service is excellent and competitively priced.</td>
    </tr>
    <tr>
    <td>Address:</td>
    <td>PO Box 161, Lockwood South, 3551, Victoria, Australia</td>
    </tr>
    <tr>
    <td>Phone:</td>
    <td>(03) 5435 4182 or +61 3 5435 4182</td>
    </tr>
    <tr>
    <td>Fax:</td>
    <td></td>
    </tr>
    <tr>
    <td>Hours:</td>
    <td>By appointment only.</td>
    </tr>
    <tr>
    <td>Web:</td>
    <td></td>
    </tr>
    <tr>
    <td>E-mail:</td>
    <td><a class="navlink" href="mailto:">E-mail Mulberry Lane Quilting</td>
    </tr>
    <tr>
    <td>Blog:</td>
    <td></td>
    </tr>
    <tr>
    <td>Proprietor:</td>
    <td>Geoff &amp Bev</td>
    </tr>
    </table>
    
    <table>
    <tr>
    <th colspan="2"><h4 style="text-align:left;";>Mentone</h4></th>
    </tr>
    <tr>
    <th colspan="2">Primitive Patches</th>
    </tr>
    <tr>
    <td colspan="2">Primitive Patches offers a range of Patchwork fabrics, Books &amp; Patterns</td>
    </tr>
    <tr>
    <td>Address:</td>
    <td>119 Lower Dandenong Rd, Mentone, Vic, 3194</td>
    </tr>
    <tr>
    <td>Phone:</td>
    <td>(03) 9583 4455 or +61 3 9583 4455</td>
    </tr>
    <tr>
    <td>Fax:</td>
    <td></td>
    </tr>
    <tr>
    <td>Hours:</td>
    <td>Monday to Friday 10am - 5pm, Saturdays 10am - 4 pm</td>
    </tr>
    <tr>
    <td>Web:</td>
    <td><a class="navlink" href="http://www.primitivepatches.com.au/">Primitive Patches</a></td>
    </tr>
    <tr>
    <td>E-mail:</td>
    <td><a class="navlink" href="mailto:">E-mail Primitive Patches</a></td>
    </tr>
    <tr>
    <td>Blog:</td>
    <td><a class="navlink" href="http://www.primitivepatches.com.au/blog/primitive/blog.html">Primitive Patches Blog</a></td>
    </tr>
    <tr>
    <td>Proprietor:</td>
    <td>Ann-Maree Canterford</td>
    </tr>
    </table>
    Ideally I would like to have just
    HTML Code:
    <h3 style="text-align:left;";>Victoria</h3>
    visible until the user clicks somewhere, all those stockists (headed by h4)appear and clicking again hides them all.

    I have no idea how to do this, whether by JS, css, HTMl etc:

    Any advice most welcome.
    ========================
    Carn the Tiges!
    www.petalsandpatches.com

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    That's easy to do with jQuery (i.e. JavaScript). There are lots of scripts pre-written out there. Take a butcher's at this one, for example:

    Simple Tabs w/ CSS & jQuery - Easy Tab Tutorial with CSS and jQuery - jQuery Tutorials - Tabbed Navigation Tutorial | jQuery Tutorials | Web Design Tutorials and Front-end Development Blog by Soh Tanaka

    (View the demo link on that page.)

    Ideally, though, you should restructure the HTML on your page to make it something like on that demo page. I.e. lose that table layout.

  3. #3
    SitePoint Zealot
    Join Date
    Jun 2006
    Location
    Australia
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that Ralph.

    I am using the tables because I gave up in fustration at trying to get a list (un or ordered) to look good. It never seesm to line up.

    Tables might be messy but they are quick and from my perspective they work!
    ========================
    Carn the Tiges!
    www.petalsandpatches.com

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    You could easily to that with headings and divs. If ever you need help with layout like this, feel free to ask here.

  5. #5
    SitePoint Enthusiast Acmeous's Avatar
    Join Date
    Oct 2008
    Location
    Kolkata, India
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Tigers! View Post
    Thanks for that Ralph.

    I am using the tables because I gave up in fustration at trying to get a list (un or ordered) to look good. It never seesm to line up.

    Tables might be messy but they are quick and from my perspective they work!
    If you are thinking to getting this showing and hiding done by unordered or ordered lists, then this should help you - How to Create Easy Collapsible and Expandable Lists in JavaScript | Acmeous

  6. #6
    SitePoint Member
    Join Date
    May 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can always use CSS for that effects,not complex code like js but the same output.

    you can use them by
    {visible:none} then when user clicks {visible:block};

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by markme View Post
    You can always use CSS for that effects,not complex code like js but the same output.

    you can use them by
    {visible:none} then when user clicks {visible:block};
    Please check your code before you post as there is no css property called visible. The correct property is "visibility" but there is also no value "block" for visibility either. You seem to have mixed "display" values into the mix.

    Notwithstanding using the correct code you still can't make persistent content appear and disappear with CSS alone as there is no "click" action in css. You can use hover, active or focus but that's not the same. You can also hide things using fragment identifiers to reveal the content but has limited use in real situation.

    Hiding and showing content is "behaviour" and best carried out with script.

  8. #8
    SitePoint Member
    Join Date
    May 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Please check your code before you post as there is no css property called visible. The correct property is "visibility" but there is also no value "block" for visibility either. You seem to have mixed "display" values into the mix.

    Notwithstanding using the correct code you still can't make persistent content appear and disappear with CSS alone as there is no "click" action in css. You can use hover, active or focus but that's not the same. You can also hide things using fragment identifiers to reveal the content but has limited use in real situation.

    Hiding and showing content is "behaviour" and best carried out with script.
    Thanks for correcting bro. It should be display:none and display:block..this is embarrassing .

    even though theres no click option for css but you can always play with the html thing,put it in a tag like
    <div id="main">
    <a href="divtoshow">something here</a>
    <div id="divtoshow">
    </div>
    </div>

    css:

    divtoshow is like this
    #divtoshow{
    display:none;
    }
    #main a:target div[id]{
    display:block;
    }

    I am not really sure if this is the exact code but I use them for the past projects I have and I can't remember the exact code but it is similar to this.Hope this help

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by markme View Post
    Thanks for correcting bro. It should be display:none and display:block..this is embarrassing .
    No worries we all make typos


    divtoshow is like this
    #divtoshow{
    display:none;
    }
    #main a:target div[id]{
    display:block;
    }

    Yes that's what I was referring to when I mentioned fragment identifiers and there's a very old article here about it. You can actually do it without using :target but both methods have limited use due to the scrolling effect that the browser takes when navigation to fragment identifiers.

    It's an interesting trick though

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hmm, have been meaning to get my head around :target, but that's a very incomplete article. That show/hide code doesn't work at all. Not sure what point he was trying to make with that.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Hmm, have been meaning to get my head around :target, but that's a very incomplete article. That show/hide code doesn't work at all. Not sure what point he was trying to make with that.
    Yes he made a mess of the code and what he meant was this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    p {
        display: none;
    }
    p:target {
        display: block;
    }
    </style>
    </head>
    <body>
    <h2 id="topic1"><a href="#content1">Topic 1</a></h2>
    <p id="content1">This is the text for topic 1. Hello World!</p>
    <h2 id="topic2"><a href="#content2">Topic 2</a></h2>
    <p id="content2">Different text for topic 2. Ah, foobar.</p>
    </body>
    </html>

    Doesn't work in IE8 and under so is not much good for general hide and show use but is good for highlighting in page link destinations

  12. #12
    SitePoint Member
    Join Date
    May 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay I here's the link of a sample site that uses that trick. Lightbox

    try to view its source code and the css codes.I got it while surfing the net.

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Yes he made a mess of the code and what he meant was this
    Thanks, Paul, you're a champ. That's what I thought he meant, so that's the way I marked it up, and it didn't work. Thought I must have been missing something, but must have made a typo.

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by markme View Post
    Okay I here's the link of a sample site that uses that trick. Lightbox

    try to view its source code and the css codes.I got it while surfing the net.

    Yes that's a nice demo

    It's still the same method I mentioned originally but fails spectacularly in IE8 and under which means that it's not really much use for general use. Good for hobbyists and specialist sites but needs a lot of work to provide suitable fall-back for older browsers.

    Eric has a few of these (but without transformations) which are also quite nice.

  15. #15
    SitePoint Zealot
    Join Date
    Jun 2006
    Location
    Australia
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you all for your comments. It has been most informative.
    My latest incarnation is found at Applique, Bear, Cloth doll, Stitcherys, Stitcheries, Quilt, Bags patterns and kits - Petals & Patches
    I have had it for a few days and it works well but I wish to refine it further.
    There are a couple of things I would like to change
    1. At the moment it is only a 2 level data set :- state -> stockists. I would like to make it a 3-level data set :- state -> town -> stockists.
    Is this possible using JS?

    2. The 'hide stockists' element appears at the base of each state
    a. Is it possible to have it appear at the base of each stockist without mucking up the code or unduly complicating the code?
    b. My wife calls the 'hide stockists' yucky (technical I know ) and wishes to have it look better. I note that Win7 Windows Explorer has the triangle on the root of the drives that change shape when open. Could the '+' be replaced by another symbol or a different coloured '+'?
    ========================
    Carn the Tiges!
    www.petalsandpatches.com

  16. #16
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    I can't see any of what you are describing there. E.g. state -> stockists. Where's that?

  17. #17
    SitePoint Zealot
    Join Date
    Jun 2006
    Location
    Australia
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ralph
    If you click on the '+' beside say, SA it will expand to show some stockists.
    (SA is smaller than NSW, Qld or Vic)
    ========================
    Carn the Tiges!
    www.petalsandpatches.com

  18. #18
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Tigers! View Post
    If you click on the '+' beside say, SA it will expand to show some stockists.
    O, right. TBH, I think you need to make that more obvious, as it isn't clear at all. I wouldn't ave thought to click there.

    I'm sure it's possible to do what you are asking, but this is getting into the JS realm. I'd suggest you post a question in the JS forum.

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Sounds like a tree type menu. You could change the plus sign to a minus to indicate that it needs to close like this example.


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
  •