CODEWITHSUNDEEP
javascripthtmltoggle
Neeraj
Neeraj

Reputation: 9145

Toggling Div Content On Click

I have an div container that contains three div child element in which just first child div element is displayed on page load.

I just need to display subsequent child div element on button click. It means when i click button first time then it should display div containing text "Series Type2" and again when i click button then next child element "Series Type3" should be displayed. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/div/html4/strict.dtd">
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <title>On Demand | Vod Info</title>        
        </head>
        <style>
            body {
                font-family: Arial;
                font-weight: bold;
                color: #FFFFFF;
            }
            #recording-container { 
                width:100%; 
                margin:0 auto; 
                background-color:#8E898F; 
                width:40%;
                margin-top:10%;
                height:100px;
            }
            #type {color: #fff; width: 100%}
            #save {color: #fff; width: 100%}
            .placeholder{
                height:20px;
            }
            .spacer{
                height:20px;
            }
            .margin-5{
                margin-left:5%
            }
            .highlight {
                /*-moz-box-shadow: 0 0 5px 4px red;*/
                -webkit-box-shadow: 0 0 0px 0px #ad2eb2;
                box-shadow: 0 0 3px 3px #ad2eb2;
                border-radius: 3px;
            }
            .title{    
                background-color: #ad2eb2;
                text-align: center;    
            }

            .series {    
                height: 36px;    
                width: 80%;
                margin: 0 auto;
                overflow: hidden;
            }
            .seriesType{
                float: left;
                height: 36px;
                line-height: 36px;
                margin: 0 5px;
                padding: 0 10px;
                text-align: center;
                width:100%
            }        
        </style>
        <body>
            <div id="recording-container">
                <div id="title" class="title">Record</div>
                <div class="placeholder"></div>
                <div class="series highlight">
                    <div class="seriesType" id="series_0">Series Type1</div>
                    <div class="seriesType" id="series_1">Series Type2</div>
                    <div class="seriesType" id="series_2">Series Type3</div>
                </div>           
            </div>  
            <input type="button" onclick="switchdiv()" name="Switch" value="Switch">
    <script>
    function switchdiv()
    {
     // Need to write code here
    }
    </script>
        </body> 
    </html>

Upvotes: 0

Views: 129

Answers (2)

SamV
SamV

Reputation: 7586

I see you are not using jQuery so this answer wont either.

There are a few ways to do this, here's a fiddle: http://jsfiddle.net/SP67E/

I would recommend using a list instead and not having each one overlay the other. Each list item would be hidden until it was needed to be shown.

But that is your choice, so the fiddle accommodates to that.

Fiddle Code:

var seriesId = 0;
var seriesCount = 3;
function switchdiv() {
    // Stops last series from being hidden
    if (seriesId >= (seriesCount -1)) return;
    // Hides each element in turn
    document.getElementById("series_" + seriesId).style.display="none"
    seriesId++;
}

Edit: If you want to decrement here is the updated fiddle: http://jsfiddle.net/SP67E/1/

Upvotes: 2

user773423
user773423

Reputation:

Maybe not the most elegant but this should work.

<script>
    var nextSeries = 2;

    function switchdiv()
    {
        $("#series_" + nextSeries).show();
        nextSeries += 1;
    }
</script>

Upvotes: 0

Related Questions