JS Show Div

by deadendstreet

HTML

<div id="highlights">
    <div id="blogs">
        <div id="message-1" class="blog" onclick="showresponddiv(this.id); changeClass1();">News</div>
        <div id="message-2" class="blog" onclick="showresponddiv(this.id); changeClass2();">Blogs</div>
        <div id="message-3" class="blog" onclick="showresponddiv(this.id); changeClass3();">Newshour</div>
        <div id="message-4" class="blog" onclick="showresponddiv(this.id); changeClass4();">Days of Dust</div>
 
    </div>
<div id="respond-1" style=" display: none;" class="latestnews">
   <div class="left-box">
            <a target="_blank" href="http://straight2jackie.blogspot.com/"><img width="180" height="53" align="middle" alt="Send your questions and comments to program director Jackie" title="Straight 2 Jackie" src="http://kacv.org/images/filecabinet/folder48/1300802705blog.jpg"/></a></div>
            <div class="right-box">
            <h1 style="text-align: center; ">Politics and The Civil Wars...don't you just love it?</h1>
            <p></p>
            PBS is rerunning their excellent look at the candidates tonight...Mitt Romney and Barack Obama have spent hundreds of millions of dollars to tell their own stories...<br />
            <p><a target="_blank" href="http://straight2jackie.blogspot.com/2012/11/politics-and-civil-warsdont-you-just.html">Straight to Jackie--Continue Reading</a></p>
            <p></p>
 </div>
<hr />
</div>
<div id="respond-2" style="display:none; background-color: #FFFFFF;">
   <div class="left-box">
</div>

<div class="right-box">
</div>
</div>
<div id="respond-3" style="display:none; background-color: #FFFFFF;">
  <p><!-- Tier 1 NewsHour Video MODULE BEGIN -->     <script language="JavaScript" src="http://www.pbs.org/newshour/video/modules/legacy/1.js"></script> <!--Tier 1 NewsHour Video MODULE END --></p>
<!-- Tier 2 NewsHour Video MODULE BEGIN -->     <script language="JavaScript" src="http://www.pbs.org/newshour/video/modules/legacy/2.js"></script> <!--Tier 2...

CSS

#highlights {
width:    100%;
font-family: arial, georgia, sans-serif;
font: normal 14px/17px Arial, sans-serif;
height: 329px;
float:left;
padding: 0;
background-color: #FFFFFF;
position: relative;
}

#highlights #blogs {
    background-color: #bf2626;
    height: 35px;
    padding-left: 46px;
    width: 100%;
    float: left;
}

#highlights #blogs .blog {
    display: block;
    float:left;
    padding: 8px 15px;
    color: #fff;
    cursor: pointer;

}

#highlights #blogs .blog_selected {
    background: #dd5959; 
    border-top: 1px solid black;
    color: #FFFFFF;
    padding: 8px 20px;
    float: left;
    display: block;
    margin-top: -5px;
    height: 40px;
    cursor: pointer;
    }

#highlights #latestnews {
    float:left;
    height: 400px;
    width: 750px;
    background-color: red;
    padding-top: 10px;
    border-radius: 8px;
    clear: both;
}

.left-box { 
float: left;
width: 220px;
height: 300px;
 padding-bottom: 1000px;
    margin-bottom: -1000px;
    background-color: red;
 }
 
.right-box { 
float: left;
width: 500px;
background-color: purple;
height: 300px; 
 padding-bottom: 1000px;
    margin-bottom: -1000px;
    background-color: purple;
 }

JavaScript

var current = null;

function showresponddiv(messagedivid){
    var id = messagedivid.replace("message-", "respond-"),
        div = document.getElementById(id);

    // hide previous one
    if(current && current != div) {
        current.style.display =  'none';
    }   

    if (div.style.display=="none"){
        div.style.display="block";
        current = div;
    } 
    else {
        div.style.display="none";
    }
}

function changeClass1() {
            document.getElementById("message-1").className = "blog_selected";
            document.getElementById("message-2").className = "blog";
            document.getElementById("message-3").className = "blog";
            document.getElementById("message-4").className = "blog";
}

function changeClass2() {
            document.getElementById("message-2").className = "blog_selected";
            document.getElementById("message-1").className = "blog";
            document.getElementById("message-3").className = "blog";
            document.getElementById("message-4").className = "blog";
}

function changeClass3() {
            document.getElementById("message-3").className = "blog_selected";
            document.getElementById("message-1").className = "blog";
            document.getElementById("message-2").className = "blog";
            document.getElementById("message-4").className = "blog";
}
function changeClass4() {
            document.getElementById("message-4").className = "blog_selected";
            document.getElementById("message-1").className = "blog";
            document.getElementById("message-2").className = "blog";
            document.getElementById("message-4").className = "blog";
}