CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3105607
user3105607

Reputation: 369

Using jQuery to toggle specific classes [misleading?]

I have three article tags that each have 1 section which I need to animate to appear i.e height from 0px to whatever px. Each article has an ID what is the most efficient way to have an on click event for each one without writing a separate function for each individual id i.e is there a 'get clicked article's id' type method?

Thanks

Upvotes: 1

Views: 71

Answers (4)

bitoiu
bitoiu

Reputation: 7484

You can check some examples here, mainly if the id's are dynamic:

http://jsbin.com/uzEkiQa/3/

The first approach is the one already suggested, but with dynamic id's:

$('div[id^="id_"]').text("Changed by regexep");

The second one if your matching is a bit more hardcore uses filter:

var reg = new RegExp(/id_\d+/);

  $('div[id^="id_"]')
  .filter(function(index, item) {
    return reg.test(item.id);
  })
  .text("Changed by filter and regexp");

After the selection you can apply the behaviours you want. Check the JSBin to play around.

Upvotes: 0

Elias Escalante
Elias Escalante

Reputation: 315

Use a class for the click event, instead of ids .. you can then use the id or some other attribute to identify which article to expand. 

$('.someClass').click(function() {
          thisId = $(this).attr('id');

            $('#whereTheSectionsAre').find('.active').removeClass('active').next().slideUp(400);
            $(thisId+'article').toggleClass('active').next().slideDown(400);

          return false;
        });

Upvotes: 0

Josh Powell
Josh Powell

Reputation: 6297

This is what I would do,

jQuery:

$('.art h1').on('click', function() {
   $(this).parent().find('p').stop(true).slideToggle(); 
});

html:

<div class="art">
    <h1>Some article stuff</h1>
    <p>text goes here</p>
</div>

fiddle: JSFIDDLE

If you want it to slide up and have only one open at a time then you can make a minor edit like so,

jQuery:

$('.art h1').on('click', function() {    
    $('.art p').slideUp();
    $(this).parent().find('p').stop(true).slideToggle(); 
});

fiddle: Only one active JSFIDDLE

Upvotes: 2

josh3736
josh3736

Reputation: 144992

You can combine multiple selectors with a comma:

$('#id1,#id2,#id3').click(function() {
    $(this).animate(...);
});

...or you could add class="something" to each element and just select that:

$('.something').click(function() { ... });

Upvotes: 1

Related Questions