Member Avatar for JayGeePee

I'm having a little trouble finding any kind of info on how to do what im going to ask.

I have a list menu... How would I, or can I with an onclick event display more boxes. Heres what i mean. When someone clicks on cancel account for instance, when clicked certain options for cancel account will pop up.

Or technical support - when clicked another text box pops up with say what kind of tech? or another being site related or not.

When you click on one or the other more options pop up according to the option clicked on.

Im trying to explain it the best i can. I need to be steered in the right direction.

Thanks in advance.

  • 4 Contributors
  • 7 Replies
  • 553 Views
  • 3 Weeks Discussion Span
  • Latest Post Latest Post by Kraai
Member Avatar for kidwon

First it seems this ain't CSS problem and it belongs to the Web Development section but anyway I guess I can help you here.
First save this file http://code.jquery.com/jquery-1.4.3.min.js of Javascript libraries in the directory of your website and give it a path. Probably you've heard of Jquery but anyway...

This is the CSS and the unordered list I've used. It really needs additional CSS styling but for the example it's alright.

<style type="text/css">
    
    ul
    {
    margin: 0;
    padding: 0;
    list-style-type: none;
    }
    
    .navcontainer li { margin: 0; display:block;}
    
    .first{ display: block;
    color: #FFF;
    background-color: #036;
    width: 9em; cursor:pointer; padding: 3px 3px 3px 17px;}
    
    .navcontainer a
    {
    display: block;
    color: #FFF;
    background-color: #036;
    width: 9em;
    padding: 3px 12px 3px 8px;
    text-decoration: none;
    border-bottom: 1px solid #fff;
    font-weight: bold;
    }
    
    .navcontainer a:hover
    {
    background-color: #369;
    color: #FFF;
    }
    
    .navcontainer li li a
    {
    display: block;
    color: #FFF;
    background-color: #69C;
    width: 9em;
    padding: 3px 3px 3px 17px;
    text-decoration: none;
    border-bottom: 1px solid #fff;
    font-weight: normal;
    }
    	
    .navcontainer li ul li { display:none;}

</style>
<body>
<div class="navcontainer">
<ul>
<li class="first">Whatever
   <ul>
   <li><a href="#">Additional</a></li>
   <li><a href="#">Additional 2 etc.</a></li>
   </ul>
</li>
<li class="first">Whatever 2
   <ul>
   <li><a href="#">Additional</a></li>
   <li><a href="#">Additional 2 etc.</a></li>
   </ul>
</li>
<li class="first">Whatever 3
   <ul>
   <li><a href="#">Additional</a></li>
   <li><a href="#">Additional 2 etc.</a></li>
   </ul>
</li>
</ul>
</div> 
</body>

And now the code that makes your wish come true :)

<script type="text/javascript" src="jquery-1.4.3.min.js"></script>
<script type="text/javascript">
 $(function(){
   $(".first").click(function() {
   				  $(".first ul li").slideUp("slow");
   				  $(this).find("li").slideDown("slow");   
   });
 });
</script>

I'm explaining every single line as it's referred in numbers above:

1.Reference to the library I've ask you to download
2.Your javascript tag
3. A function which loads the code when the page is loaded
4. Refers to the objects of class "first", in other words your parent buttons (see above the html)and opens a function on click event.
5.Refers to all secondary buttons and tells them to hide by sliding up if a main button is already hit and it's children are visible.
6.Shows the children of the very button that's hit

You should post the code in a browser in order to see how it works it's tested.

If you don't understand something ask me here!!!

Edited by kidwon because: n/a
Member Avatar for JayGeePee

That works nicely...But its not what i'm looking for. I'm coding with dreamweaver, so i'm using the select list/menu in a form. I'm actually working on a contact form. When someone wants to contact me, they enter there name, email, priority(low, medium, high), and a message. I want to give the list/menu option to choose which email it goes to. Billing, Technical, Cancel Account, other. And when they click on one of the list menu items, say cancel account for instance. After clicking cancel account another text box labeled reason pops up, and another named customer id, etc. Same goes with the other options. When they are clicked on labeled text box options pop up for additional info to be submitted from the form.

Member Avatar for kidwon

Not sure that I can help you on this one!
Building custom menu isn't a particular question it's about building it.
Here's an issue in the forum that might help
http://www.daniweb.com/forums/thread239342.html

Here are some tutorials that could be very useful:
http://www.nodstrum.com/2007/09/19/autocompleter/
http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/
http://www.chromaticsites.com/blog/jquery-tutorial-selecting-multiple-select-form-elements-on-the-fly/
To see how they work view the DEMO on the page.

Having already the idea you can try asking particular questions here in the webdevelopment-javascript section http://www.daniweb.com/forums/forum117.html or at http://stackoverflow.com/ where large amount of experienced developers are found either.

Edited by kidwon because: n/a
Member Avatar for JayGeePee

How do I make sure a selected radio button sends mail to the right email. What im getting at is if the technical radio button is selected i want the form on submit to submit to tech@mysite.com, or cancel radio button selection to cancel@mysite.com, etc.

This is pretty much the idea i was getting @ when a radio button is selected it displays another box for additional info. Works about like I expected, pretty simple.

<html>
<head>
<script type="text/javascript">
function hide() {
var div_ref = document.all("id_div");
div_ref.style.visibility = "hidden";
}

function show() {
var div_ref = document.all("id_div");
div_ref.style.visibility = "visible";
}


</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />



</head>

<body>
<tr>
<td>
Select Device Type <BR>
</td>
<td style="width:200">
<input type="Radio" name="DeviceGroup" value="Radiobutton1" onclick="show();" checked="checked">Radio button 1
<input type="Radio" name="DeviceGroup" value="Radiobutton2" onclick="hide();" unchecked>Radio button 1
</td>
<td>
<div id=id_div style="visibility:hidden;">
Show Textbox1
<input type="Text" name="Textbox1">
</div>
</td>
</tr>

</body>
</html>
Edited by JayGeePee because: n/a
Member Avatar for kidwon

Well I didn't get you at all, yes it is simple.
Even now it's hard for me to understand what you mean exactly.
About the mails - test, see if the mails are received correctly, but sending emails trough forms sounds like php to me.
Really don't have that kind of experience with auto forms but showing and hiding html elements on event is easy. It's pity I didn't get you first time.

Edited by kidwon because: n/a
Member Avatar for hunsbergah

Hi,
what would you add to the javascript to make the lists hide, if they were already visible--some sort of IF clause attached to the end, so it doesn't always execute the slide down function.

Thanks

Member Avatar for Kraai

You can set different emails to different options on your form, by using this:

<select name="send-to" >
<option value="support@email.com">support</option>
<option value="cancel@email.com">cancel</option>
</select>
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.