Skip to main content

Multiple object selection with jQuery






I have a pretty basic jQuery question and forgive me if it has already been answered. Basically I attempt to have a link slide down a div. This is fairly simple however I require multiple links sliding down their respective divs. I understand I can just name the links and divs unique classes and solve the problem that way, however this naturally also requires a duplication of the jQuery code for each link-div and i have a lot. I therefore need a general script. A simplified version of my situation is as follows:








HTML:







<div>

<a id=link1>toggle text 1</a>

<div class=link1>TEXT 1</div>



<a id=link2>toggle text 2</a>

<div class=link2>TEXT 2</div>

</div>







My attempt at a jQuery general script for this:







$(document).ready(function() {

$('[id^=link]').bind('click', function() {

var $div = $(this).attr('id');

if($('[class=' + div + ']').is(':visible')) {

$('[class=' + div + ']').slideUp();

} else {

$('[class=' + div + ']').slideDown();

}



return false;

});

});







But as one might expect since I'm writing here it does not work. I am thinking is has to do with the ^= but I can't figure out how to improve it.


Any thoughts?









Best Regards


Andreas


Comments

  1. Wouldn't that work?

    $("a").click(function(){
    $(this).next().slideToggle();
    });

    ReplyDelete
  2. I would suggest having a common class on all your links, for example...

    <a id="link" class="link">


    and you can select multiple with...

    $(".link")


    alternative, you could select all A tags....

    $("a")

    ReplyDelete
  3. Two problems:


    you were declaring a variable $div but using div
    to select by class, use .classname and not '[class=...]


    Optimizations:


    select your div and re-use the variable $divto avoid re-selecting 3 times the same element
    in an event handler, this is the DOM element. To get its ID, just use this.id, not need for jquery


    Here's the code:

    $('[id^=link]').bind('click', function() {
    var id = this.id,
    $div = $('.' + id);

    if ($div.is(':visible')) {
    $div.slideUp();
    } else {
    $div.slideDown();
    }

    return false;
    });


    DEMO

    ReplyDelete
  4. I realise that others are suggesting alternatives, and I would encorage you to look at them. To answer your specific problem I believe it lies with the variable names:

    The lines of code with div in then, e.g.

    if($('[class=' + div + ']').is(':visible')) {


    Should possibly have $div instead.

    ReplyDelete
  5. You can try this more verbose example... hope this helps:

    <html>
    <head>
    <title>jQuery Test Slider</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js" type="text/javascript"></script>
    </head>
    <body>
    <script type="text/javascript">
    $(document).ready(function () {
    $('[id^=link]').bind('click', function () {
    var myDiv = $(this).attr('id');
    var isVis = $('[class=' + myDiv + ']').is(':visible');
    if (isVis)
    {
    $('[class=' + myDiv + ']').slideUp();
    }
    else
    {
    $('[class=' + myDiv + ']').slideDown();
    }

    return false;
    });
    });
    </script>

    <div>
    <a id="link1">toggle text 1</a>
    <div class="link1">TEXT 1</div>

    <a id="link2">toggle text 2</a>
    <div class="link2">TEXT 2</div>
    </div>

    </body>
    </html>

    ReplyDelete

Post a Comment

Popular posts from this blog

Why is this Javascript much *slower* than its jQuery equivalent?

I have a HTML list of about 500 items and a "filter" box above it. I started by using jQuery to filter the list when I typed a letter (timing code added later): $('#filter').keyup( function() { var jqStart = (new Date).getTime(); var search = $(this).val().toLowerCase(); var $list = $('ul.ablist > li'); $list.each( function() { if ( $(this).text().toLowerCase().indexOf(search) === -1 ) $(this).hide(); else $(this).show(); } ); console.log('Time: ' + ((new Date).getTime() - jqStart)); } ); However, there was a couple of seconds delay after typing each letter (particularly the first letter). So I thought it may be slightly quicker if I used plain Javascript (I read recently that jQuery's each function is particularly slow). Here's my JS equivalent: document.getElementById('filter').addEventListener( 'keyup', function () { var jsStart = (new Date).getTime()...

Is it possible to have IF statement in an Echo statement in PHP

Thanks in advance. I did look at the other questions/answers that were similar and didn't find exactly what I was looking for. I'm trying to do this, am I on the right path? echo " <div id='tabs-".$match."'> <textarea id='".$match."' name='".$match."'>". if ($COLUMN_NAME === $match) { echo $FIELD_WITH_COLUMN_NAME; } else { } ."</textarea> <script type='text/javascript'> CKEDITOR.replace( '".$match."' ); </script> </div>"; I am getting the following error message in the browser: Parse error: syntax error, unexpected T_IF Please let me know if this is the right way to go about nesting an IF statement inside an echo. Thank you.