CODEWITHSUNDEEP
htmlcss
Ceejay
Ceejay

Reputation: 7267

How to contents of div onclick tab

I have tabs and i have some div, when i click the tabs the particular div should be shown.

but when i click the tab, multiple div are shown at a same time. How to show only one div when i click one tab?

here is my code:

HTML:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="css/style.css" type="text/css">
    </head>
    <body>
        <div id="ie-test">

            <ul class="group" id="boxLinks">
                <li><a href="#box1">Description</a></li>
                <li><a href="#box2">Audience</a></li>
                <li><a href="#box3">Objectives</a></li>
                <li><a href="#box4">Prerequisites</a></li>
                <li><a href="#box5">Duration</a></li>
            </ul>
            <div id="box">
                <br>
                <div class="box" id="box1">1</div>
                <div class="box" id="box2">Another box!</div>
                <div class="box" id="box3">Woot!</div>
                <div class="box" id="box4">Another box!</div>
                <div class="box" id="box5">Anotheasfr box!</div>
                <br>
            </div>
        </div>
    </body>
</html>

css

#ie-test {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
}
#boxLinks {
    list-style: none outside none;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
#boxLinks li {
    display: inline;
}
#boxLinks li a {
    border: 1px solid #CCCCCC;
    color: black;
    display: block;
    float: left;
    left: 1px;
    margin-left: -1px;
    padding: 5px 10px;
    position: relative;
    text-decoration: none;
}
#boxLinks li a:hover {
    background: none repeat scroll 0 0 #000000;
    color: #FFFFFF;
}
#box {
    border: 1px solid #CCCCCC;
    height: 522px;
    overflow: hidden;
    padding: 0 30px;
    position: relative;
    top: -1px;
    width: 90%;
}
.box {
    display: block;
    height: 250px;
    position: relative;
}
#box1:target, #box2:target, #box3:target {
    display: block;
    height:auto;
}

Upvotes: 2

Views: 3462

Answers (4)

Airan
Airan

Reputation: 477

Checkout the following JSFIDDLE:

$('ul.group > li > a').click(function(event){
    $('div.box').each(function(){$(this).css('display', 'none');});
    $('div'+$(this).attr('href')).css('display', 'block');
});
$('ul.group > li > a[href=#box1]').click();

Upvotes: 2

Ravi Verma
Ravi Verma

Reputation: 184

You can use jquery . below is working code which is using jquery.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#ie-test {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
}
#boxLinks {
    list-style: none outside none;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
#boxLinks li {
    display: inline;
}
#boxLinks li a {
    border: 1px solid #CCCCCC;
    color: black;
    display: block;
    float: left;
    left: 1px;
    margin-left: -1px;
    padding: 5px 10px;
    position: relative;
    text-decoration: none;
}
#boxLinks li a:hover {
    background: none repeat scroll 0 0 #000000;
    color: #FFFFFF;
}
#box {
    border: 1px solid #CCCCCC;
    height: 522px;
    overflow: hidden;
    padding: 0 30px;
    position: relative;
    top: -1px;
    width: 90%;
}
.box {
    display: block;
    height: 250px;
    position: relative;
}
#box1:target {

    display: block;
    height:auto;
background-color:red;
}
#box2:target {

    display: block;
    height:auto;
background-color:red;
}
#box3:target {

    display: block;
    height:auto;
background-color:red;
}
#box4:target {

    display: block;
    height:auto;
background-color:red;
}
#box5:target {

    display: block;
    height:auto;
background-color:red;
}
</style>
<script type="text/javascript" src="jquery-2.0.3.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$(".box").each(function()
{
$(this).css("display","none");
});

});
function Show(boxName)
{
$('.box').css("display","none");
$('#'+boxName).css("display","block");
}
</script>
</head>
<body>
<div id="ie-test">

                <ul class="group" id="boxLinks">
                    <li><a href="javascript:Show('box1')">Description</a></li>
                    <li><a href="javascript:Show('box2');">Audience</a></li>
                    <li><a href="javascript:Show('box3');">Objectives</a></li>
                    <li><a href="javascript:Show('box4');">Prerequisites</a></li>
                    <li><a href="javascript:Show('box5');">Duration</a></li>
                </ul>
                <div id="box">
                    <br>
                    <div class="box" id="box1">1</div>
                    <div class="box" id="box2">Another box!</div>
                    <div class="box" id="box3">Woot!</div>
                    <div class="box" id="box4">Another box!</div>
                    <div class="box" id="box5">Anotheasfr box!</div>
                    <br>
                </div>

            </div>
</body>
</html>

Upvotes: 1

radha
radha

Reputation: 782

try jquery tabs or if u want only in css use this one.

.box {
    display: none;
    height: 250px;
    position: relative;
}
#box1:target, #box2:target, #box3:target, #box4:target, #box4:target {
    display: block;
    height:auto;
}

Upvotes: 4

Samira Khorshidi
Samira Khorshidi

Reputation: 942

you can use jqueryui tab:its easy to use and nice .

Upvotes: 3

Related Questions