CODEWITHSUNDEEP
javascriptjqueryhtml
biip
biip

Reputation: 97

Show/Hide a div on click

i'm writing a small script to show/hide a div when other div is clicked, but I can't get the second div clickable.

Here's my code so far:

$(document).ready(function(){
    $('div#ordontia').click(function(){
        $(this).next('div#ordontia2').slideToggle("slow");
    });
});

http://jsfiddle.net/65AK2/1/

Every time a "button" is clicked a new div with a description should appear on the bottom of the table. (the blue div on the bottom). If another button is clicked then the previous description should close and another one should open in the same place. (not implement yet)

Thanks in advance for any help!

Upvotes: 0

Views: 245

Answers (6)

kelunik
kelunik

Reputation: 6908

Why do you want to select your element with next if it has an unique ID?

$(document).ready(function(){
    $('div#ordontia').click(function(){
        $('div#ordontia2').slideToggle("slow");
    });
});

more general if you add more divs:

$(document).ready(function(){
    $('.botaomedicina').click(function(){
        $('#'+$(this).attr('id')+'2').slideToggle("slow");
    });
});

with all others closing:

$(document).ready(function(){
    $('.botaomedicina').click(function(){
        $('.botaomedicinadescription').slideUp("slow");
        $('#'+$(this).attr('id')+'2').slideToggle("slow");
    });
});

Upvotes: 2

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67207

You can do it directly by an ID selector

http://jsfiddle.net/65AK2/3/

$(document).ready(function(){
    $('#ordontia').click(function(){
        $('#ordontia2').slideToggle("slow");
    });
});

Upvotes: 0

Anto Subash
Anto Subash

Reputation: 3215

try this 

$(document).ready(function(){
    $('div#ordontia').click(function(){
        $('div#ordontia2').slideToggle("slow");
    });
});

updated fiddle http://jsfiddle.net/65AK2/4/

Upvotes: 1

Fallenreaper
Fallenreaper

Reputation: 10694

Fixed it.

http://jsfiddle.net/65AK2/2/

firstly, it lookx like your toggled div was mal-formed. I didnt see a for it.

Secondly, if you know what the ID of the other div is, you dont need to say:

$(this).next("#item");

, it would make no sense.

Upvotes: 2

X-Pippes
X-Pippes

Reputation: 1170

$(document).ready(function(){
    $('div#ordontia').click(function(){
        $('div#ordontia2').slideToggle("slow");
    });
});

remove this ;)

Upvotes: 1

ComFreek
ComFreek

Reputation: 29424

Don't use $.next, it only selects siblings of the current element:

Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.
— jQuery documentation: .next()

Use the normal one:

$('div#ordontia2').slideToggle("slow");

Upvotes: 2

Related Questions