jquery an div tags used in a ordered list

Question

hello everyone,

i'm not sure where my errors are lying but here is my scenario...

i have an un-ordered list in html that handles my main link bar...

    <ul id="navlist">

 <li><a href="/" id="current">home</a></li>

 <li><a href="#" id="search">search</a></li>

 <li><a href="#" id="users">login</a></li>    

</ul>

and what i want done is to call each id and have jQuery handle each and dislpay it where specified in my css file... for now, lets just ignore my "home" link...

here is a snippet of my inline jquery

$(document).ready(function()
{
    $("a").click(function ()
    {
        $("div#login").slideToggle("fast");
    });
})

Now, whichever div i specify, it calls that ... however it will only call one div, using either from the un-orderd list, as mentioned above in the html.

My Goal is to call a search bar when search is clicked, and to call a login box when login is clicked.

to my knowledge (noob), i believe use an as a class, however that is what brings me here.

i believe my error is in my jquery and not my css, as stated above, either instance will be displayed when the jquery function calls either tag.

any help is greatly appreciated.

thanks in advance

shan2on

Answer 1

Can you post more of your HTML and script?

You can attach a listener on the click event for search by the following:

$("#search").click(function()
{
    $("#searchBox").slideToggle();  //Assuming the id of the search box is 'searchBox'
}

Answer 2

If I understand your question right, you want to display some content when the user clicks a link of your list, and that displayed content it's diferent for each link ?

If so, you can do like this:

HTML (no changes made here)

<ul id="navlist">

 <li><a href="/" id="current">home</a></li>

 <li><a href="#" id="search">search</a></li>

 <li><a href="#" id="users">login</a></li>    

</ul>

SCRIPT (changed)

$(document).ready(function() {
  $("a").click(function () {
    var Id_to_Class = $(this).attr("id");
    $("div." + Id_to_Class).slideToggle("fast");
  });
});

Like this when you click the element "a", the script will collect it's id value, and call a div with that value as an class!

Ps: It's not tested, but should be ok! If this is what you want and you need that tested, let me know! ;)

Answer 3

HTML:

<ul id="navlist">
    <li><a href="/" id="current">home</a></li>
    <li><a href="#search" class="showbox">search</a></li>
    <li><a href="#login" class="showbox">login</a></li>
</ul>
<div id="search" class="box">Content for  id "search" Goes Here</div>
<div id="login" class="box">Content for  id "login" Goes Here</div>

Explanation: I use the selector for the search bar and login box in the respective href attribute. Those <a>s that are involved has a classname so I that I can just select them w/o selecting other <a>s. I also gave the boxes a common classnames so i can reference to all of them.

jQUery:

jQuery(function($) {
    $('a.showbox').click(function() {
        var theBoxToShow = $(this).attr('href'); // Line 1
        $('.box').slideUp().filter(theBoxToShow).slideDown(); // Line 2
        return false; // Line 3
    });
});

Explanation: Only a.showbox will be involved in the onclick here. Line 1 gets the selector of the element i want to show (search bar/login box). Line 2 hides all the boxes, filter only the box that relates to the clicked <a>. Line 3 to prevent browser from jumping to top.

You can display:none the div.box in your css to hide them at first. Hope that helps.