CODEWITHSUNDEEP
jqueryhtmlcss
user3180105
user3180105

Reputation: 381

jquery using fadeToggle for multiple for multiple buttons and hidden text

I'm having trouble getting fadeToggle to work. I'm using it to reveal text upon clicking a another div. This is intended to be used for multiple elements, so I'm hoping there can be an elegant and efficient way to handle all of them.

Here's what I current have - which doesn't work (I don't think I'm using "this" correctly:

$(document).ready(function() {
  $('#daily').click(function () {
    $('this p').fadeToggle(100);
  }):
  $('#color').click(function () {
    $('this p').fadeToggle(100);
  }):
  $('#bw').click(function () {
    $('this p').fadeToggle(100);
  }):
}):

Here's the jsfiddle: http://jsfiddle.net/qEKJe/

I'd like to use this in combination with a .load() call, don't know if that will change things.

Also - bonus points if you can make it so revealing a new text block closes any that are currently showing

Upvotes: 0

Views: 819

Answers (2)

CRABOLO
CRABOLO

Reputation: 8793

http://jsfiddle.net/qEKJe/4/

Added classes to your p's.

<div class="select">
    <div>
        <div id="daily" class="selectopt">Daily</div>
        <p class="daily-p">Daily photos description</p>
    </div>
    <div>
        <div id="color" class="selectopt">Color</div>
        <p class="color-p">Color photos description</p>
    </div>
    <div>
        <div id="bw"  class="selectopt">Black & White</div>
        <p class="bw-p">Black & White photos description</p>
    </div>
</div>

This will work for all of them now.

$(document).ready(function() {
    $('.selectopt').click(function () {
        var x = $(this).attr('id');
        $('.' + x + '-p').fadeToggle(100);
    });
});

Upvotes: 0

DaniP
DaniP

Reputation: 38262

You can change your selector an instead the id for each one use the classname. Also the declaration $('this p') is invalid you need this:

$('.selectopt').click(function () {
    $(this).next('p').fadeToggle();
})

Check this Demo Fiddle

Upvotes: 2

Related Questions