Clicking link to hide/show data

HTML & CSS
1

(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


<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


<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.

2

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. :wink:

3

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!

4

You could easily to that with headings and divs. If ever you need help with layout like this, feel free to ask here. :slight_smile:

5

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

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

Please check your code before you post as there is no css property called visible. :slight_smile: 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

Thanks for correcting bro. It should be display:none and display:block…this is embarrassing :D.

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 :smiley:

9

No worries we all make typos :slight_smile:

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 [URL=“http://www.pmob.co.uk/temp/drop-no-js.htm”]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 :slight_smile:

10

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. :frowning:

11

Yes he made a mess of the code and what he meant was this:


<!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

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. :smiley:

13

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. :nono:

14

Yes that’s a nice demo :slight_smile:

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

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 :confused: ) 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 ‘+’?

16

I can’t see any of what you are describing there. E.g. state -> stockists. Where’s that?

17

Ralph
If you click on the ‘+’ beside say, SA it will expand to show some stockists.
(SA is smaller than NSW, Qld or Vic)

18

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. :slight_smile:

19

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.