How do I use an image as a show/hide?

  • 1
  • Question
  • Updated 8 years ago
  • Answered
This is what I want to do...

I would like to use an image to show/hide a list.

An example of the first one I will attempt to do this with...

An image of the world, it will indicate within the picture, "click here to for list of countries"

Then a list of countries will show up below the picture.

What I DO NOT want...

any symbol indicating a show/hide such as plus or minus sign. Help much appreciated. thanks.

P.S.

Plain English and maybe the code to use is better than providing resources.

Maybe in the code use, "INSERT PICTURE URL HERE" and "START LIST HERE".

This would help.
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
  • http://youcanneverbetoosmart.com

Posted 8 years ago

  • 1
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
Simplest one I could find without a js file to download.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd...;
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<title>Untitled</title>
<script type="text/javascript">
document.write('<style type="text\/css">#toggle { display: none; }<\/style>');
</script>
<script type="text/javascript">
function switchMenu(obj) {
var el = document.getElementById(obj);
if ( el.style.display != "none" ) {
el.style.display = 'none';
}
else {
el.style.display = 'block';
}
}
function hide() {
document.getElementById("toggle").style.display='none';
}
</script>
</head>
<body onload="hide();">
<a onclick="switchMenu('toggle');" title="Test"><img src="resources/INSERT PICTURE URL HERE" /></a><br><div id="toggle">START LIST HERE This text toggles when the world is clicked.</div>
</body>
</html>

You can see it in action here: http://www.testvillage.yolasite.com/e...
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Excellent work Diane! Thanks so much for your help!
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
yea, I haven't tried it yet, but it's now too late so I will try it tomorrow and let you know how it worked. Thanks Diane! Much appreciated
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
as for the list, do I use the same format I would for bullets or numbers (however I want the list to appear) such as....?

<!--

<UL>
<LI> ONE </LI>
<LI> TWO</LI>
</UL>

-->

or is there another format meant for this code?
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
I think you should be able to use the same format. Let me know if you have trouble.
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
Works like a charm diane, look at this page and click on the image. :) Thanks for your help.
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
well, the first image worked.

The second image show/hides the first list. How is the image linked to the list so I can fix this?
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
I've managed to fix the problem with the picture opening the wrong list, but now my list is showing by default instead of the original way of hiding by default. :) - happy? :( - Sad?
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
Hi, Donald,

I think I got this working: see http://www.testvillage.yolasite.com/e...

In the code, there are three occurrences of the word "toggle." For the second image add a 2 like this "toggle2" on all three occurrences of the word. For a third, you would add a 3 and so on. I hope this is clear. Let me know if you get it working.
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
yes, I came to that conclusion myself, but on my site, the list is shown by default instead of hidden. I see on your test site it's hidden.

Can you copy the html to the second image so I can see why my list isn't hidden by default?
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
I have each code for each image in separate html widgets.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd...;
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<title>Untitled</title>
<script type="text/javascript">
document.write('<style type="text\/css">#toggle { display: none; }<\/style>');
</script>
<script type="text/javascript">
function switchMenu(obj) {
var el = document.getElementById(obj);
if ( el.style.display != "none" ) {
el.style.display = 'none';
}
else {
el.style.display = 'block';
}
}
function hide() {
document.getElementById("toggle2").style.display='none';
}
</script>
</head>
<body onload="hide();">
<a onclick="switchMenu('toggle2');" title="Test2"><img src="resources/300px-Silver_medal_world_centered.svg.png" /></a><br><div id="toggle2">This is a second bunch of info.</div>
</body>
</html>
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
A little bit more of a challenge...

How can I have lists within these lists show/hide?

I would to have the same effect, click them image to show/hide a list. But when the list shows, I'd like it to stop with the first level of bullets, I'd like the second level of bullets and so

Image (click for list of topics)


  • ITEM ONE
  • ITEM TWO
  • ITEM THREE (click for subtopics)

    • ITEM 3a
    • ITEM 3b (click for subtopics)
        ITEM 3b1

    Photo of Donald

    Donald

    • 2991 Posts
    • 37 Reply Likes
    However ITEM 3a and below won't show until you click Item THREE and Item 3b1 isn't going to show until you click item 3b.
    Photo of diane

    diane

    • 1238 Posts
    • 121 Reply Likes
    Now you're stretching my meager coding abilities! LOL I'll work on it but it may take me awhile as I am working on a website for a client.
    Photo of Donald

    Donald

    • 2991 Posts
    • 37 Reply Likes
    I'm guessing all that have to be done is to merge codes. Copy the code and insert it at a level 1 bullet and delete the image from the second code. Right?
    Photo of diane

    diane

    • 1238 Posts
    • 121 Reply Likes
    Hi, Donald, I don't know if you got it figured out already. I had a go at it. The code would look something like this:
    <!DOCTYPE HTML PUBLIC"-//W3C//DTDHTML4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd...;
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
    <title>Untitled</title>
    <script type="text/javascript">
    document.write('<style type="text\/css">#toggle { display: none; }<\/style>');&nbsp;
    document.write('<style type="text\/css">#toggle2 { display: none; }<\/style>');&nbsp;document.write('<style type="text\/css">#toggle3 { display: none; }<\/style>');
    </script>
    <script type="text/javascript">
    function switchMenu(obj) {
    var el = document.getElementById(obj);
    if ( el.style.display != "none" ) {
    el.style.display = 'none';
    }
    else {
    el.style.display = 'block';
    }
    }
    function hide() {
    document.getElementById("toggle").style.display='none';&nbsp;document.getElementById("toggle2").style.display='none';
    document.getElementById("toggle3").style.display='none';}
    </script>
    </head>
    <body onload="hide();">
    <a onclick="switchMenu('toggle');" title="Test"><img src="resources/300px-Silver_medal_world_centered.svg.png" /></a><br><div id="toggle"><p><span class="Apple-style-span" style="font-family: Arial, Helvetica, Sans; font-size: 13px; line-height: 17px; "><ul style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 20px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-weight: inherit; font-style: inherit; font-size: 13px; font-family: inherit; vertical-align: baseline; list-style-type: disc; list-style-position: initial; list-style-image: initial; "><li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-weight: inherit; font-style: inherit; font-size: 13px; font-family: inherit; vertical-align: baseline; ">ITEM ONE</li><li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-weight: inherit; font-style: inherit; font-size: 13px; font-family: inherit; vertical-align: baseline; ">ITEM TWO</li><li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-weight: inherit; font-style: inherit; font-size: 13px; font-family: inherit; vertical-align: baseline; "><a onclick="switchMenu('toggle2');" title="Test">ITEM THREE (click for subtopics)</a><br><div id="toggle2"><ul style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 20px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-weight: inherit; font-style: inherit; font-size: 13px; font-family: inherit; vertical-align: baseline; list-style-type: disc; list-style-position: initial; list-style-image: initial; "><li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-weight: inherit; font-style: inherit; font-size: 13px; font-family: inherit; vertical-align: baseline; ">ITEM 3a</li><li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-weight: inherit; font-style: inherit; font-size: 13px; font-family: inherit; vertical-align: baseline; "></ul></li></ul></li></ul></span></p></div></div></div>
    </body></html>

    See it in action here: http://testvillage.yolasite.com/expan...