CODEWITHSUNDEEP
jqueryhtmlcss
Maha1419
Maha1419

Reputation: 191

muiltipe times show or hide using jquery

I am new to jquery and Javascript still I am learning and I am working on the same.

The below question might be simple for the experience people.

Kindly help me

Actually I am trying for one page portfolio.

1) Two divs column in my page left & right 2) In left I have navigation which has three links & right I have content 3) By default my first link of the content will be shown display: block; but the rest will be shown disable. Once I click the second link the first page of the content should be hide and the second content should shown the same thing for the third henceforth.

Right now my code is 

<div id="navi">
<ul>
      <li><a href="#first">First link</a></li>
      <li><a href="#second">Second link</a></li>
      <li><a href="#third">Third link</a></li>
</ul>
</div>

<div id="content1" style="display:block;">
<a href="#">#first</a>
    Check first content
</div>
<div id="content2" style="display:none;">
<a href="#">#Second</a>
    Check first content
</div>
<div id="content3" style="display:none;">
<a href="#">#third</a>
    Check first content
</div>

Kindly help me how to do

Upvotes: 0

Views: 156

Answers (5)

benembery
benembery

Reputation: 676

This fiddle would require a few additions and amendments but It will do the the trick and you won't need to change the JavaScript to add more tabs.

http://jsfiddle.net/LY6sC/

HTML

 <div id="navi">
    <ul>
        <li class="content-tab"><a href="#first">First link</a></li>
        <li class="content-tab"><a href="#second">Second link</a></li>
        <li class="content-tab"> <a href="#third">Third link</a></li>
    </ul>
</div>
<div id="first" class="content-pane">
<a href="#">#first</a>
Check first content</div>
<div id="second" class="content-pane">
<a href="#">#Second</a>
Check second content</div>
<div id="third" class="content-pane">
<a href="#">#third</a>
Check third content</div>

JavaScript

$(function() {
    var hidePaneCssClass ='content-pane-hidden';

    $('.content-tab a').on('click',function(evt) {
        $('.content-pane').addClass(hidePaneCssClass);
        var target = $(evt.currentTarget).attr('href');
        $(target).removeClass(hidePaneCssClass);
    });

    $('.content-tab:first-child a').trigger('click');

});

CSS

.content-pane-hidden {
    display:none;
}

Note: it's progressive enhancement so your tabs will all be shown if a person has no JavaScript or the script fails to load.

Upvotes: 1

Harmony Proxy Mothibe
Harmony Proxy Mothibe

Reputation: 74

// Since you are new to jquery and javascript First of all make sure your elements have attributes i.e. ids/classes, just to make to make ur life easier... // Haven't tested the code,t should work

function checkContent(element){
    id =$(element).attr('id');
    if(id =="first"){ 
            $("div[id^='content']").hide()
            $("#content1").show();
    }               
    if(id =="second"){
            $("div[id^='content']").hide()
            $("#content2").show();
    }
    if(id =="third"){
            $("div[id^='content']").hide()
            $("#content3").show();
    }
}
$("#first, #second, #third").click(function(){
        checkContent(this);
});

Upvotes: 1

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67197

Just add a common class to the both link and its corresponding div element and use jquery to manipulate that,

HTML

<div id="navi">
<ul>
      <li><a class='link1' href="#first">First link</a></li>
      <li><a class='link2' href="#second">Second link</a></li>
      <li><a class='link3' href="#third">Third link</a></li>
</ul>
</div>

<div class='link1' id="content1" style="display:block;">
    <a href="#">#first</a>
    Check first content
</div>

<div class='link2' id="content2" style="display:none;">
    <a href="#">#Second</a>
    Check first content
</div>

<div class='link3' id="content3" style="display:none;">
    <a href="#">#third</a>
    Check first content
</div>

JQUERY

$("#navi a").click(function(){

    $('div[id^="content"]').hide();

    $("div" + "." + $(this).attr('class') ).show();
});

LIVE - DEMO

Upvotes: 1

Ruwanka De Silva
Ruwanka De Silva

Reputation: 3745

It's simple with using jquery here is the simplest solution

$('#navi ul li a').click(function(){
    var href = $(this).attr('href');
    if(href === '#first'){
        $('#content1').show();
        $('#content2').hide();
        $('#content3').hide();
    }
    if(href === '#second'){
        $('#content1').hide();
        $('#content2').show();
        $('#content3').hide();
    }
    if(href === '#third'){
        $('#content1').hide();
        $('#content2').hide();
        $('#content3').show();
    }
});

you can develop a function to simplify the process to match any number of elements.

here is demo on jsfiddle

Upvotes: 1

Rituraj ratan
Rituraj ratan

Reputation: 10378

jquery ui tabs fit on this condition please try it

update

for verticle tabs see demo

Upvotes: 1

Related Questions