One Button, Show/Hide Multiple Divs

Question

I am still new to jquery, and am trying to do this: With a click on a button, hide/show informations in the left and right column. I currently have 3 buttons, each showing different information when clicked. And I want it such that when the web page load, the information on the first button will be displayed.

However, currently, both my buttons and information are not working. Any help is appreciated.

JS Fiddle: http://jsfiddle.net/xYqX7/18/

HTML:

<div class="left-container">
    <ul id="illis">
        <li id="more">
            <figure class="idea-image-wrapper"></figure>
            <video width="100%" height="auto" id="myvideo1">
                <source src="videos/all.mp4" type="video/mp4" />
            </video>
        </li>
        <li id="distance">
            <figure class="idea-image-wrapper"></figure>
            <video width="100%" height="auto" id="myvideo2">
                <source src="videos/all_test.mp4" type="skype/mp4" />
            </video>
        </li>
        <li id="art">
            <figure class="idea-image-wrapper"></figure>
            <video width="100%" height="auto" id="myvideo3">
                <source src="videos/all_test.mp4" type="painting/mp4" />
            </video>
        </li>
    </ul>
</div>
<div id="content">
    <header class="col-3-1">
         <h1 class="title"><b>Kitchen Act</b></h1>

        <ul class="text-items">
            <li id="text-more">
                 <h2>More the merrier.</h2>

                <div class="">
                    <p>Trust me, two brains are better than one.</p>
                </div>
            </li>
            <li id="text-distance">
                 <h2>Distance is not a problem.</h2>

                <div class="">
                    <p>Trust me, two brains are better than one.</p>
                </div>
            </li>
            <li id="text-art">
                 <h2>Eating is art.</h2>

                <div class="">
                    <p>The act of eating encourages the act of creating (cooking, baking are both art generating forms).</p>
                </div>
            </li>
        </ul>
        <ul id="navigation">
            <li class="slidenav content-close active"><a href="#text-more"></a>More</li>
            <li class="slidenav content-close"><a href="#text-distance"></a>Distance</li>
            <li class="slidenav content-close"><a href="#text-art"></a>Art</li>
        </ul>
    </header>
</div>

CSS:

/*LEFT CONTAINER*/

.left-container{
    position:relative;
    width:67%;
    float:left;
}

#illis{
    list-style:none;
    padding:0;
    margin:0;
    float:right;
    clear:right;
    width:100%;
    overflow:hidden;

    padding-top: 10%;
}

/*
RIGHT CONTAINER*/

#text-distance, #text-art{
    display:none;
}

#content{
    color:#666;
    background-color:#ebebe8;
    position:fixed;
    overflow: hidden;
    top:0;
    bottom:0;
    left:67%;
    width:100%;
    padding-right:4em;
    z-index: 3;
}

header{
    color:#fff;
    background-color: blue;
}

.col-3-1{
    width:33%;
    height:100%;
    float:left;
    padding:3em 0;
    box-sizing:border-box;
}

.col-3-1:first-child{
    padding: 3em 2em;
}

.text-items{
    padding:0;
    margin:0;
    list-style:none;
}

JS:

$(document).ready(function () {

    var tabs = $('ul#navigation li a');

    tabs.bind('click', function (event) {
        var $anchor = $(this);
        var ids = tabs.each(function () {
            $($(this).attr('href')).hide();
        });
        $($anchor.attr('href')).fadeIn('slow');
        event.preventDefault();
    });
});

Answer 1

First, put the nav text inside the <a> tags.

  <ul id="navigation">
     <li class="slidenav content-close active"><a href="#text-more">More</a></li>
     <li class="slidenav content-close"><a href="#text-distance">Distance</a></li>
     <li class="slidenav content-close"><a href="#text-art">Art</a></li>
  </ul>

using this css, hide all the videos initially:

#illis li{
    display: none;
}

and, I've made some revisions on your jQuery:

UPDATE: Added script so the video will play automatically when the respective tab is clicked

$(document).ready(function () {
    var tabs = $('#navigation li a');
     $("#more").fadeIn("slow");              // show default video
     $('#myvideo1').get(0).play();           // play default video
    tabs.click(function () {
       var $anchor = $(this).attr("href");
       tabs.each(function(){  
       var $curr = $(this).attr("href");
           $($curr).hide();
                });
        if($anchor == "#text-distance"){
            $("#more").hide();
            $("#art").hide();  
            $("#distance").fadeIn("slow");
            $('#myvideo2').get(0).play();   // play respective video
            $('#myvideo1').get(0).pause();  // pause the other videos
            $('#myvideo3').get(0).pause();  // pause the other videos
        }
        if($anchor == "#text-more"){
            $("#more").fadeIn("slow");
            $("#art").hide();  
            $("#distance").hide();
            $('#myvideo1').get(0).play();
            $('#myvideo2').get(0).pause();
            $('#myvideo3').get(0).pause();
        }
        if($anchor == "#text-art"){
            $("#more").hide();
            $("#art").fadeIn("slow");  
            $("#distance").hide();
            $('#myvideo3').get(0).play();
            $('#myvideo1').get(0).pause();
            $('#myvideo2').get(0).pause();
        }
        $($anchor).fadeIn("slow");
        event.preventDefault();
    });


});

WORKING DEMO //Used sample videos just for demo

Answer 2

Add the following line at the end of your DOM ready

tabs.first().click();

And your text should be inside the a elements so that they are clickable.

So that you have:

$(document).ready(function () {

    var tabs = $('ul#navigation li a');

    tabs.bind('click', function (event) {
        event.preventDefault();
        var $anchor = $(this);
        var otherShow = '#' + this.href.split('-')[1];
        tabs.each(function () {
            var other = '#' + this.href.split('-')[1];
            $( other ).hide();
            $( $(this).attr('href') ).hide();
        });
        $( $anchor.attr('href') ).fadeIn('slow');
        $( otherShow ).fadeIn('slow');
    });

    tabs.first().click();
});

<a href="#...">Text to be clicked</a>

JS FIDDLE DEMO