CODEWITHSUNDEEP
jquery
SamotnyPocitac
SamotnyPocitac

Reputation: 402

jquery hide all and show child

I have links when you click it shows the specific div and the rest hides. It all is working fine but it's coded all manually one by one. See http://jsfiddle.net/M9kAX/

Is there a better way to code it with a simple script that applies for all divs?

Thanks,

<div class="kosa">
<div id="video0"><h5>Introduction</h5>  
Intro
</div>          
<div id="video1"><h5>Install </h5>  
Install
</div>
<div id="video2"><h5>Authorize with Adobe ID</h5>
Authorize
</div>
<div id="video3"><h5>Add a Library</h5>
Add Lib
</div>
<div id="video4"><h5>Borrow titles</h5>
Borrow
</div>
<div id="video5"><h5>Download</h5>
Download
</div>
<div id="video6"><h5>Read eBooks</h5>
Read
</div>
<div id="video7"><h5>Delete, Return, & Share</h5>
Del
</div>
<div id="video8"><h5>One</h5>
One
</div>
</div>
       <div class="related">    
            <h5>Related Videos</h5>
            <span id="link0"><i class="icon-video"></i> Introduction</span>
            <span id="link1"><i class="icon-video"></i> Install</span>
            <span id="link2"><i class="icon-video"></i> Authorize with Adobe ID</span>
            <span id="link3"><i class="icon-video"></i> Add a Library</span>
            <span id="link4"><i class="icon-video"></i> Borrow titles</span>
            <span id="link5"><i class="icon-video"></i> Download</span>
            <span id="link6"><i class="icon-video"></i> Read eBooks</span>
            <span id="link7"><i class="icon-video"></i> Delete, Return, & Share</span>
            <span id="link8"><i class="icon-video"></i> One</span>
         </div>

$(function() {      
        $('#video1,#video2,#video3,#video4,#video5,#video6,#video7,#video8').hide();   
        $('#link0').click(function () {$('#video0').show();$('#video1,#video2,#video3,#video4,#video5,#video6,#video7,#video8').hide(); });
        $('#link1').click(function () {$('#video1').show();$('#video0,#video2,#video3,#video4,#video5,#video6,#video7,#video8').hide(); });
        $('#link2').click(function () {$('#video2').show();$('#video0,#video1,#video3,#video4,#video5,#video6,#video7,#video8').hide(); });
        $('#link3').click(function () {$('#video3').show();$('#video0,#video1,#video2,#video4,#video5,#video6,#video7,#video8').hide(); });
        $('#link4').click(function () {$('#video4').show();$('#video0,#video1,#video2,#video3,#video5,#video6,#video7,#video8').hide(); });
        $('#link5').click(function () {$('#video5').show();$('#video0,#video1,#video2,#video3,#video4,#video6,#video7,#video8').hide(); });
        $('#link6').click(function () {$('#video6').show();$('#video0,#video1,#video2,#video3,#video4,#video5,#video7,#video8').hide(); });
        $('#link7').click(function () {$('#video7').show();$('#video0,#video1,#video2,#video3,#video4,#video5,#video6,#video8').hide(); });
        $('#link8').click(function () {$('#video8').show();$('#video0,#video1,#video2,#video3,#video4,#video5,#video6,#video7').hide(); });
        });

Upvotes: 0

Views: 87

Answers (5)

Venkata Krishna
Venkata Krishna

Reputation: 15112

JSFIDDLE DEMO

$('[id^=video]').hide();
$('#video0').show(); //show only 1st one

//events on ids which begin with link i.e., link0, link1...
$('[id^=link]').click(function() {
    var newId = this.id.replace("link","video"); //make a new ID
    $('[id^=video]').hide();//hide all divs first
    $('#' + newId).show();//show specific div
});

Upvotes: 1

Arunkumar Srisailapathi
Arunkumar Srisailapathi

Reputation: 1169

jQuery (".kosa")    .find ("div:first-child")
                    .css ("display", "block");

jQuery (".related")    .find ("span")
.click (function () {
       $idNo = jQuery (this).attr ('id').substring(4); 
    jQuery (".kosa")    .find ("div")
                        .css ("display", "none");

    jQuery (".kosa")    .find ("#video" + $idNo)
                        .css ("display", "block");
});

Css change:

.kosa div{
    padding:40px;
    background:#ccc; 
    display: none; // Included
}

jsFiddle: http://jsfiddle.net/M9kAX/11/

Upvotes: 1

Aliaksei Bulhak
Aliaksei Bulhak

Reputation: 6208

try something like this 

$(function() {      
    $("span").click(function(){
        $("div.kosa").find("div#video").html($(this).text());
    });
});

Upvotes: 1

Alex
Alex

Reputation: 11255

Use css classNames(fiddle):

$(function () {
    var $videos = $('.video');

    var showVideo = function (index) {
        $videos.hide().eq(index).show();
    };

    showVideo(0);

    $('.link').click(function () {
        var linkIndex = $(this).index() - 1;
        showVideo(linkIndex)
    });

});

Upvotes: 1

Samsquanch
Samsquanch

Reputation: 9146

I would use the data attribute:

<span id="link0" data-video="video0"><i class="icon-video"></i> Introduction</span>

Add the video ID to each span with data-video, then you can use jQuery's data function to retrieve the value and show the div you want:

$(function() {      
    $('.kosa div').hide();
    // $('.kosa div:first').show(); // uncomment this line to show the frst div by default
    $('.related span').click(function() {
       $('.kosa div').hide();
       $('#'+$(this).data('video')).show();
    });
});

This approach is more flexible than using the .eq function, which would force you to move around your divs and make sure they were in the right order each time you made an edit. This also allows you to link to the same div with multiple spans if you need to.

http://jsfiddle.net/M9kAX/3/

Upvotes: 1

Related Questions