CODEWITHSUNDEEP
jquerycsshtmlselector
Firezilla12
Firezilla12

Reputation: 110

Show a div inside a hidden div

I have two divs inside a div and I want to show only one at a time

<div class="songContent">
    <div id="song1"> song 1 </div>
    <div id="song2"> song 2</div>
</div>

And I am triggering the event from another element using this function: (passing the string as an argument to the function, ex: songId = song1 )

function showSong(songId){  
    $('.songContent div').hide();
    var sel = '#'+songId;
    $(sel).show()
    $( sel +' div').show()
    alert(sel);             //debugging
}

Any help would be appreciated, Thanks,

Upvotes: 0

Views: 2596

Answers (4)

PSL
PSL

Reputation: 123739

provided you have only one displayed at a time during the start you can simply use toggle.

$('#show').click(function(){
       $('div[id^=song]','#songContent').toggle();
});

Upvotes: 2

tcovo
tcovo

Reputation: 7740

If you build a selector string that looks like #song1 div, it won't find your song1 div. You need something like div#song1.

Example:

function showSong(songId){  
    $('.songContent div').hide();
    var sel = '#'+songId;
    $( 'div' + sel).show()
}

But the by-id selector by itself (sel) should have worked as a selector.

Upvotes: 1

Kaloyan
Kaloyan

Reputation: 7352

function showSong(songId){  
    $('.songContent div').hide();
    $('div[id=' + songId + ']').show();
}

Upvotes: 1

Jakub Kotrs
Jakub Kotrs

Reputation: 6229

Something like this?

function showSong(songId){
    $('#'+songId).show().siblings().hide();
}

Upvotes: 7

Related Questions