help with html or css

Question

spudly1987 0 Light Poster

12 Years Ago

<html>
<script type="text/javascript">
  function show_hide(o){
    if(o.className == "hidden"){
      document.getElementById('menu').style.display = 'block';
      o.className = "show";
    }else if(o.className == "show"){
      document.getElementById('menu').style.display = 'none';
      o.className = "hidden";
    }
  }
</script>
<a href="#" class="hidden" onclick="show_hide(this)">Bryn Blayne</a>
<div id="menu" style="display: none;">
  <ul>
    <li><a href="file:///C:/Users/Vince/Pictures/kinklive%20fan/brynabout.htm" TARGET="MAIN">About Me</a></li>
    <li><a href="file:///C:/Users/Vince/Pictures/kinklive%20fan/bryncontact.htm" TARGET="MAIN">Contact</a></li>
    <li><a href="file:///C:/Users/Vince/Pictures/kinklive%20fan/brynschedule.htm" TARGET="MAIN">Schedule</a></li>
    <li>Pictures</li>
    <li>Videos</li>
  </ul>
</div>
<p>
<script type="text/javascript">
  function show_hide(o){
    if(o.className == "hidden"){
      document.getElementById('menu').style.display = 'block';
      o.className = "show";
    }else if(o.className == "show"){
      document.getElementById('menu').style.display = 'none';
      o.className = "hidden";
    }
  }
</script>
<a href="#" class="hidden" onclick="show_hide(this)">Alexxa Bound</a>
<div id="menu" style="display: none;">
  <ul>
    <li><a href="file:///C:/Users/Vince/Pictures/kinklive%20fan/brynabout.htm" TARGET="MAIN">About Me</a></li>
    <li><a href="file:///C:/Users/Vince/Pictures/kinklive%20fan/bryncontact.htm" TARGET="MAIN">Contact</a></li>
    <li><a href="file:///C:/Users/Vince/Pictures/kinklive%20fan/brynschedule.htm" TARGET="MAIN">Schedule</a></li>
    <li>Pictures</li>
    <li>Videos</li>
  </ul>
</div>

















</html>

yes someone helped me along time ago with a drop down list they created something for me which is of the following, what i want to do is keep the way it is but add another drop down the same way but open another set of lists for some reason the way i am doing it if i click on either persons name it opens the same list can anyone help me please.

html-css web-design

3 Contributors
11 Replies
123 Views
6 Days Discussion Span
Latest Post 12 Years Ago Latest Post by spudly1987

Philippe.Lahaie 42 Posting Whiz in Training

12 Years Ago

well , of course it opens the same list if there is the same text in ever <li> tags, change the text and see if its different.

on a side note, you dont need to have the javascript function twice, both lists will use the same. also you can't have both divs with the same "id", change both of them from "menu" to "menubryn" and "menualexxa"

Edit: i just realized the js function uses the id to set the visibility, you can easily adapt that to be used for multiple lists...

you could use loop through child tags of "o" object for a ul tag and set that child's visibility instead of using "document.get~"
you could set the 'class="hidden" ' to the ul instead of the <a> tag and change the onclick call to "show_hide("menu_bryn")" and change the function a bit to search for "document.getElementById(o)" and then check for that object's class name.

try soemthing and come back to me with some code :)

Edited 12 Years Ago by Philippe.Lahaie because: epiphany

drjohn 56 Posting Pro in Training

12 Years Ago

or read up on the son of suckerfish, or superfish menus.

they are reliable and widely used systems.

Philippe.Lahaie 42 Posting Whiz in Training

12 Years Ago

yup, thats what i understood also, and this is what the suggested changes will do :)

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

spudly1987 0 Light Poster · Answer 1 · 2012-05-10T23:54:34+00:00

@philippe, The thing is I want it to look and act like this I will try to explain

I wan to have the name Bryn so that when you click on it it drops down a list

then i want a name of Alexxa so that when you click on it it drops down a list as well

I want each list under each name, for example

and then when you click on the name again it will hide the list.

bryn

item 1
item 2

alexxa

item 1
item 2

spudly1987 0 Light Poster · Answer 2 · 2012-05-11T15:29:40+00:00

<html>

<script type="text/javascript">

  function show_hide(o){

    if(o.className == "hidden"){

      document.getElementById('0').style.display = 'block';

      o.className = "show";

    }else if(o.className == "show"){

      document.getElementById('0').style.display = 'none';

      o.className = "hidden";

    }

  }

</script>

<a href="#" class="hidden" onclick="show_hide("menu_bryn")">Bryn Blayne</a>

<div id="menubryn" style="display: none;">

  <ul>

    <li><a href="file:///C:/Users/Vince/Pictures/kinklive%20fan/brynabout.htm" TARGET="MAIN">About Me</a></li>

    <li><a href="file:///C:/Users/Vince/Pictures/kinklive%20fan/bryncontact.htm" TARGET="MAIN">Contact</a></li>

    <li><a href="file:///C:/Users/Vince/Pictures/kinklive%20fan/brynschedule.htm" TARGET="MAIN">Schedule</a></li>

    <li>Pictures</li>

    <li>Videos</li>

  </ul>

</div>
<p>
<a href="#" class="hidden" onclick="show_hide("menu_alexxa")">Alexxa Bound</a>

<div id="menualexxa" style="display: none;">

  <ul>

    <li><a href="file:///C:/Users/Vince/Pictures/kinklive%20fan/brynabout.htm" TARGET="MAIN">About Me</a></li>

    <li><a href="file:///C:/Users/Vince/Pictures/kinklive%20fan/bryncontact.htm" TARGET="MAIN">Contact</a></li>

    <li><a href="file:///C:/Users/Vince/Pictures/kinklive%20fan/brynschedule.htm" TARGET="MAIN">Schedule</a></li>

    <li>Pictures</li>

    <li>Videos</li>

  </ul>

</div>

</html>

These are the changes from what i thought you suggested like i wrote to you im not really clear on javascript so you are speaking spanish to me, but now that i made the changes it doesnt work any more

Philippe.Lahaie 42 Posting Whiz in Training · Answer 3 · 2012-05-11T15:49:54+00:00

your gonna want to pass the div's id to the show_hide() function. with the underscore included.

<a href="#" class="hidden" onclick="show_hide("menu_bryn")">Bryn Blayne</a>
<div id="menubryn" style="display: none;">

also, i dont think you have any element with an id="0" in your code, so this line is wrong.

document.getElementById('0').style.display = 'block';

Since you are calling show_hide from the onclick event of the <a> tags and thats the element with a class name hidden or show, you will need to keep in place the mechanism to know who called the function.

function show_hide(o){
 if(o.className == "hidden"){

So basicly, you will now need 2 arguments instead of 1, "this" referencing the <a> tag like it used to do, AND the div's UNIQUE id. this way you will keep the "o.className" stuff, and look for "document.getElementById(id)".

try this and let me know what you come up with!

spudly1987 0 Light Poster · Answer 4 · 2012-05-12T16:43:56+00:00

i appreciate the non helping, i am going to try to see if i can hunt down the person that helped me last time and made the code for me, you may know what your talking about but i don't so thank you

Philippe.Lahaie 42 Posting Whiz in Training · Answer 5 · 2012-05-14T13:40:19+00:00

im sorry this is just not the kind of forum you seem to think it is , no hard feelings, and good luck!

spudly1987 0 Light Poster · Answer 6 · 2012-05-15T01:00:51+00:00

no it is the kind of forum i think it is cause someoen was nice enough to help me but your not

Philippe.Lahaie 42 Posting Whiz in Training · Answer 7 · 2012-05-15T18:00:50+00:00

if that person person you are talking about spoon-fed you, he was not helping you.

spudly1987 0 Light Poster · Answer 8 · 2012-05-16T02:49:00+00:00

no he didnt spoon feed me but i gave him what i had and he re wrote it for me so that i can see what i was doing wrong, what your telling me is gibbrish all im asking for is help and you cant provide that so just stop responding if you don't want to help