Question

I want to make a div, or to be more precise, an “aside” element which has an id or class to appear when another element that has the same class is clicked… I know that there is the standard class selector but I want there to be more than one “aside” element with different id’s or classes and I want that one to be opened that has the same class or id as the clicked element…

So, I don’t want to write the this code for every single div:

    $(window).load(function(){
      $('nav ul li#someid').click(function () {
      $('aside#someid').toggleClass('opened');
      });
    });

I want code like this. Is there a way to change the someid from the example to something that detects what id the clicked element has and use it as the “aside” selector?

Answer 1

First off, you may want to know that you can use this to access the object that was clicked on. That means you can get this.id or this.className to get the id or class of the object that was clicked on. Now, exactly what you do with that info depends upon how your HTML is structured so we’d need to see that to provide more specifics.

You cannot have multiple objects in the same page with the same ID. You simply cannot do that (selectors will not work properly when you do that) so your desired scheme will not work. You could use classes instead and toggle the other item with the same class. This would work for one particular li.

$(document).ready(function(){
    $('nav ul li.foo').click(function () {
        $('aside.foo').toggleClass('opened');
    });
 });

Or, depending upon your HTML (if you only have one class on the li tag), you could do a more general version like this:

$(document).ready(function(){
    $('nav ul li').click(function () {
        $('aside.' + this.className).toggleClass('opened');
    });
});

If you show us your actual HTML, we could provide the best options.