Vertical Buttons - reveal content right

[seatea63]

This should be fairly straight forward to explain but can't seem to find anything to resolve this request.

I am looking for something that will allow for a button to be clicked on the left and once clicked change colour to show it is selected and the content to appear to the right. I have taken some basic snapshots of this below.

If any further info is required or a solution already exists please advise.

[bernie1227]

ok, so here's one way you could do it. I've also put in a nice little fade effect using jquery. It's just text but it can be used for images as well, so the HTML will look something like this:

<div class="section" id="info" style="margin-top: 0px; ">
<h3><a href="#">Button</a></h3>
</div>

<div class="section" id="search" style="margin-top: 0px; ">
<h3><a href="#">Button2</a></h3>
</div>

<div class="section" id="player" style="margin-top: 0px; ">
<h3><a href="#">Button3</a></h3>
</div>

<div class="section" id="socials" style="margin-top: 0px; ">
<h3><a href="#">Button4</a></h3>
</div>

    <div id="content-reveal">
    <ul id="newsticker_1" class="newsticker">
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</li>
        <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip...</li>
        <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum...</li>
        <li>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia...</li>
        <li>Bubble bubble ipsum dolor sit amet, consectetur adipisicing elit...</li>
    </ul>
</div>

and then the jquery:

$(document).ready( function() {
    $('#content-reveal').hide();
    $('#info').click( function() {
        $('#content-reveal').fadeOut( 500, function() {
            $('#content-reveal').html( '<b>info HTML</b>' );
            $('#content-reveal').fadeIn( 500 );
        } );
    } );
    $('#search').click( function() {
        $('#content-reveal').fadeOut( 500, function() {
            $('#content-reveal').html( '<b>search HTML</b>' );
            $('#content-reveal').fadeIn( 500 );
        } );
    } );
    $('#player').click( function() {
        $('#content-reveal').fadeOut( 500, function() {
            $('#content-reveal').html( '<b>player HTML</b>' );
            $('#content-reveal').fadeIn( 500 );
        } );
    } );
    $('#socials').click( function() {
        $('#content-reveal').fadeOut( 500, function() {
            $('#content-reveal').html( '<b>socials HTML</b>' );
            $('#content-reveal').fadeIn( 500 );
        } );
    } );
} );

should work. Thats the basic idea anyway. You can always just use button images or actuall styled button tags instead of the links.

[seatea63]

Does this imply that clicking on a button opens a new page to the right (ie separate pages)? The idea was that the whole thing is on one page. Clicking the button to the left would reveal the content on the right and that the button clicked would change colour to signify that was the one being clicked.

[bernie1227]

Does this imply that clicking on a button opens a new page to the right (ie separate pages)? The idea was that the whole thing is on one page. Clicking the button to the left would reveal the content on the right and that the button clicked would change colour to signify that was the one being clicked.

no, the code I have given you is all on one page. You can make the button change color when you click on it using CSS styling. For example, you could set the following CSS rules to the links:

.section {
width: 100px;
height: 50px;
background-color: blue;
}

.section a:focus
{
 background-color: red;
}

the first part of this CSS is merely making it vaguely button looking with a blue background, and then when you click on it, the background color will change to red. You can use this styling in conjunction with the code I have already given you to change the content displayed.