Displaying the first in simple Show / Hide content menu with active a

Question

Followed a simple tutorial here, but I want the first in the list to display on page load - Then vanish if another clicked. I also want an active class added to the button if its the one that is being viewed, how would I achieve this using jquery?

Here be the fiddle

HTML

<div id="wrap">
   <ul id="divtoggle">
      <li><a id="togglediv1" href="#">Web Design &amp; Build</a>
      </li>
      <li><a id="togglediv2" href="#">SEM/SEO</a>
      </li>
      <li><a id="togglediv3" href="#">Graphic Design</a>
      </li>
      <li><a id="togglediv4" href="#">User Experience Design</a>
      </li>
      <li><a id="togglediv5" href="#">Brand Strategy</a>
      </li>
      <li><a id="togglediv6" href="#">Digital Prototyping</a>
      </li>
      <li><a id="togglediv7" href="#">Marketing</a>
      </li>
      <li><a id="togglediv8" href="#">Digital Marketing</a>
      </li>
      <li><a id="togglediv9" href="#">Digital Strategy</a>
      </li>
      <li><a id="togglediv10" href="#">Digital Consulting</a>
      </li>
      <li><a id="togglediv11" href="#">Email Marketing</a>
      </li>
      <li><a id="togglediv12" href="#">Pay Per Click</a>
      </li>
      <li><a id="togglediv13" href="#">Advertising</a>
      </li>
      <li><a id="togglediv14" href="#">Data Analysis</a>
      </li>
   </ul>
   <div id="div1" class="content">
      <h3>Web Design &amp; Build</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh eros, commodo sit amet risus a, bibendum venenatis mi. In sed tempus ante. In ac molestie tortor. Proin convallis, diam facilisis volutpat blandit,</p>
      <p>Quisque quis suscipit augue. Quisque eu augue eu elit imperdiet posuere. Integer tempor metus consectetur interdum porta. Fusce condimentum, metus eu commodo dapibus, diam metus vestibulum lacus,</p>
      <p>Nullam facilisis nibh nec lacinia eleifend. Sed diam mi, tempus vel feugiat ac, venenatis elementum magna. Suspendisse iaculis viverra odio ut dignissim. Nam rhoncus congue bibendum. Maecenas eget metus</p>
      <p>accumsan facilisis. Nam scelerisque auctor mauris, volutpat lobortis tellus molestie et. Ut commodo volutpat venenatis. Donec luctus commodo scelerisque. Pellentesque odio libero, adipiscing et urna blandit, gravida hendrerit sem.</p>
      <div class="dots"><span>...</span>
      </div>
   </div>
   <div id="div2" class="content">
      <h3>SEM/SEO</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh eros, commodo sit amet risus a, bibendum venenatis mi. In sed tempus ante. In ac molestie tortor. Proin convallis, diam facilisis volutpat blandit,</p>
      <p>Quisque quis suscipit augue. Quisque eu augue eu elit imperdiet posuere. Integer tempor metus consectetur interdum porta. Fusce condimentum, metus eu commodo dapibus, diam metus vestibulum lacus,</p>
      <p>Nullam facilisis nibh nec lacinia eleifend. Sed diam mi, tempus vel feugiat ac, venenatis elementum magna. Suspendisse iaculis viverra odio ut dignissim. Nam rhoncus congue bibendum. Maecenas eget metus</p>
      <p>accumsan facilisis. Nam scelerisque auctor mauris, volutpat lobortis tellus molestie et. Ut commodo volutpat venenatis. Donec luctus commodo scelerisque. Pellentesque odio libero, adipiscing et urna blandit, gravida hendrerit sem.</p>
      <div class="dots"><span>...</span>
      </div>
   </div>
   <div id="div3" class="content">
      <h3>Graphic Design</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh eros, commodo sit amet risus a, bibendum venenatis mi. In sed tempus ante. In ac molestie tortor. Proin convallis, diam facilisis volutpat blandit,</p>
      <p>Quisque quis suscipit augue. Quisque eu augue eu elit imperdiet posuere. Integer tempor metus consectetur interdum porta. Fusce condimentum, metus eu commodo dapibus, diam metus vestibulum lacus,</p>
      <p>Nullam facilisis nibh nec lacinia eleifend. Sed diam mi, tempus vel feugiat ac, venenatis elementum magna. Suspendisse iaculis viverra odio ut dignissim. Nam rhoncus congue bibendum. Maecenas eget metus</p>
      <p>accumsan facilisis. Nam scelerisque auctor mauris, volutpat lobortis tellus molestie et. Ut commodo volutpat venenatis. Donec luctus commodo scelerisque. Pellentesque odio libero, adipiscing et urna blandit, gravida hendrerit sem.</p>
      <div class="dots"><span>...</span>
      </div>
   </div>
   <div id="div4" class="content">
      <h3>User Experience Design</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh eros, commodo sit amet risus a, bibendum venenatis mi. In sed tempus ante. In ac molestie tortor. Proin convallis, diam facilisis volutpat blandit,</p>
      <p>Quisque quis suscipit augue. Quisque eu augue eu elit imperdiet posuere. Integer tempor metus consectetur interdum porta. Fusce condimentum, metus eu commodo dapibus, diam metus vestibulum lacus,</p>
      <p>Nullam facilisis nibh nec lacinia eleifend. Sed diam mi, tempus vel feugiat ac, venenatis elementum magna. Suspendisse iaculis viverra odio ut dignissim. Nam rhoncus congue bibendum. Maecenas eget metus</p>
      <p>accumsan facilisis. Nam scelerisque auctor mauris, volutpat lobortis tellus molestie et. Ut commodo volutpat venenatis. Donec luctus commodo scelerisque. Pellentesque odio libero, adipiscing et urna blandit, gravida hendrerit sem.</p>
      <div class="dots"><span>...</span>
      </div>
   </div>
   <div id="div5" class="content">
      <h3>Brand Strategy</h3>
      <p>Your brand has always been important but now, more than ever, it has to be strong enough to be successful across a variety of platforms and a huge range of audiences.</p>
      <p>Our brand strategy consultation service covers everything you need to build and grow an effective and future-proof brand. We are experts in revamping older brands and we have extensive experience with creating ones from the ground up.</p>
      <p>We take a holistic approach to development and work closely with you and your team to identify how to make your brand work for you.</p>
      <p>What your customers want, as well as your market in a broader sense, are all critical factors and help us deliver a strategy which focuses on improving how people interact with your business to drive growth, trust and recognition. To see our branding work, click here.</p>
      <div class="dots"><span>...</span>
      </div>
   </div>
   <div id="div6" class="content">
      <h3>Digital Prototyping</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh eros, commodo sit amet risus a, bibendum venenatis mi. In sed tempus ante. In ac molestie tortor. Proin convallis, diam facilisis volutpat blandit,</p>
      <p>Quisque quis suscipit augue. Quisque eu augue eu elit imperdiet posuere. Integer tempor metus consectetur interdum porta. Fusce condimentum, metus eu commodo dapibus, diam metus vestibulum lacus,</p>
      <p>Nullam facilisis nibh nec lacinia eleifend. Sed diam mi, tempus vel feugiat ac, venenatis elementum magna. Suspendisse iaculis viverra odio ut dignissim. Nam rhoncus congue bibendum. Maecenas eget metus</p>
      <p>accumsan facilisis. Nam scelerisque auctor mauris, volutpat lobortis tellus molestie et. Ut commodo volutpat venenatis. Donec luctus commodo scelerisque. Pellentesque odio libero, adipiscing et urna blandit, gravida hendrerit sem.</p>
      <div class="dots"><span>...</span>
      </div>
   </div>
   <div id="div7" class="content">
      <h3>Marketing</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh eros, commodo sit amet risus a, bibendum venenatis mi. In sed tempus ante. In ac molestie tortor. Proin convallis, diam facilisis volutpat blandit,</p>
      <p>Quisque quis suscipit augue. Quisque eu augue eu elit imperdiet posuere. Integer tempor metus consectetur interdum porta. Fusce condimentum, metus eu commodo dapibus, diam metus vestibulum lacus,</p>
      <p>Nullam facilisis nibh nec lacinia eleifend. Sed diam mi, tempus vel feugiat ac, venenatis elementum magna. Suspendisse iaculis viverra odio ut dignissim. Nam rhoncus congue bibendum. Maecenas eget metus</p>
      <p>accumsan facilisis. Nam scelerisque auctor mauris, volutpat lobortis tellus molestie et. Ut commodo volutpat venenatis. Donec luctus commodo scelerisque. Pellentesque odio libero, adipiscing et urna blandit, gravida hendrerit sem.</p>
      <div class="dots"><span>...</span>
      </div>
   </div>
   <div id="div8" class="content">
      <h3>Digital Marketing</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh eros, commodo sit amet risus a, bibendum venenatis mi. In sed tempus ante. In ac molestie tortor. Proin convallis, diam facilisis volutpat blandit,</p>
      <p>Quisque quis suscipit augue. Quisque eu augue eu elit imperdiet posuere. Integer tempor metus consectetur interdum porta. Fusce condimentum, metus eu commodo dapibus, diam metus vestibulum lacus,</p>
      <p>Nullam facilisis nibh nec lacinia eleifend. Sed diam mi, tempus vel feugiat ac, venenatis elementum magna. Suspendisse iaculis viverra odio ut dignissim. Nam rhoncus congue bibendum. Maecenas eget metus</p>
      <p>accumsan facilisis. Nam scelerisque auctor mauris, volutpat lobortis tellus molestie et. Ut commodo volutpat venenatis. Donec luctus commodo scelerisque. Pellentesque odio libero, adipiscing et urna blandit, gravida hendrerit sem.</p>
      <div class="dots"><span>...</span>
      </div>
   </div>
   <div id="div9" class="content">
      <h3>Digital Strategy</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh eros, commodo sit amet risus a, bibendum venenatis mi. In sed tempus ante. In ac molestie tortor. Proin convallis, diam facilisis volutpat blandit,</p>
      <p>Quisque quis suscipit augue. Quisque eu augue eu elit imperdiet posuere. Integer tempor metus consectetur interdum porta. Fusce condimentum, metus eu commodo dapibus, diam metus vestibulum lacus,</p>
      <p>Nullam facilisis nibh nec lacinia eleifend. Sed diam mi, tempus vel feugiat ac, venenatis elementum magna. Suspendisse iaculis viverra odio ut dignissim. Nam rhoncus congue bibendum. Maecenas eget metus</p>
      <p>accumsan facilisis. Nam scelerisque auctor mauris, volutpat lobortis tellus molestie et. Ut commodo volutpat venenatis. Donec luctus commodo scelerisque. Pellentesque odio libero, adipiscing et urna blandit, gravida hendrerit sem.</p>
      <div class="dots"><span>...</span>
      </div>
   </div>
   <div id="div10" class="content">
      <h3>Digital Consulting</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh eros, commodo sit amet risus a, bibendum venenatis mi. In sed tempus ante. In ac molestie tortor. Proin convallis, diam facilisis volutpat blandit,</p>
      <p>Quisque quis suscipit augue. Quisque eu augue eu elit imperdiet posuere. Integer tempor metus consectetur interdum porta. Fusce condimentum, metus eu commodo dapibus, diam metus vestibulum lacus,</p>
      <p>Nullam facilisis nibh nec lacinia eleifend. Sed diam mi, tempus vel feugiat ac, venenatis elementum magna. Suspendisse iaculis viverra odio ut dignissim. Nam rhoncus congue bibendum. Maecenas eget metus</p>
      <p>accumsan facilisis. Nam scelerisque auctor mauris, volutpat lobortis tellus molestie et. Ut commodo volutpat venenatis. Donec luctus commodo scelerisque. Pellentesque odio libero, adipiscing et urna blandit, gravida hendrerit sem.</p>
      <div class="dots"><span>...</span>
      </div>
   </div>
   <div id="div11" class="content">
      <h3>Email Marketing</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh eros, commodo sit amet risus a, bibendum venenatis mi. In sed tempus ante. In ac molestie tortor. Proin convallis, diam facilisis volutpat blandit,</p>
      <p>Quisque quis suscipit augue. Quisque eu augue eu elit imperdiet posuere. Integer tempor metus consectetur interdum porta. Fusce condimentum, metus eu commodo dapibus, diam metus vestibulum lacus,</p>
      <p>Nullam facilisis nibh nec lacinia eleifend. Sed diam mi, tempus vel feugiat ac, venenatis elementum magna. Suspendisse iaculis viverra odio ut dignissim. Nam rhoncus congue bibendum. Maecenas eget metus</p>
      <p>accumsan facilisis. Nam scelerisque auctor mauris, volutpat lobortis tellus molestie et. Ut commodo volutpat venenatis. Donec luctus commodo scelerisque. Pellentesque odio libero, adipiscing et urna blandit, gravida hendrerit sem.</p>
      <div class="dots"><span>...</span>
      </div>
   </div>
   <div id="div12" class="content">
      <h3>Pay Per Click</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh eros, commodo sit amet risus a, bibendum venenatis mi. In sed tempus ante. In ac molestie tortor. Proin convallis, diam facilisis volutpat blandit,</p>
      <p>Quisque quis suscipit augue. Quisque eu augue eu elit imperdiet posuere. Integer tempor metus consectetur interdum porta. Fusce condimentum, metus eu commodo dapibus, diam metus vestibulum lacus,</p>
      <p>Nullam facilisis nibh nec lacinia eleifend. Sed diam mi, tempus vel feugiat ac, venenatis elementum magna. Suspendisse iaculis viverra odio ut dignissim. Nam rhoncus congue bibendum. Maecenas eget metus</p>
      <p>accumsan facilisis. Nam scelerisque auctor mauris, volutpat lobortis tellus molestie et. Ut commodo volutpat venenatis. Donec luctus commodo scelerisque. Pellentesque odio libero, adipiscing et urna blandit, gravida hendrerit sem.</p>
      <div class="dots"><span>...</span>
      </div>
   </div>
   <div id="div13" class="content">
      <h3>Advertising</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh eros, commodo sit amet risus a, bibendum venenatis mi. In sed tempus ante. In ac molestie tortor. Proin convallis, diam facilisis volutpat blandit,</p>
      <p>Quisque quis suscipit augue. Quisque eu augue eu elit imperdiet posuere. Integer tempor metus consectetur interdum porta. Fusce condimentum, metus eu commodo dapibus, diam metus vestibulum lacus,</p>
      <p>Nullam facilisis nibh nec lacinia eleifend. Sed diam mi, tempus vel feugiat ac, venenatis elementum magna. Suspendisse iaculis viverra odio ut dignissim. Nam rhoncus congue bibendum. Maecenas eget metus</p>
      <p>accumsan facilisis. Nam scelerisque auctor mauris, volutpat lobortis tellus molestie et. Ut commodo volutpat venenatis. Donec luctus commodo scelerisque. Pellentesque odio libero, adipiscing et urna blandit, gravida hendrerit sem.</p>
      <div class="dots"><span>...</span>
      </div>
   </div>
   <div id="div14" class="content">
      <h3>Data Analysis</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh eros, commodo sit amet risus a, bibendum venenatis mi. In sed tempus ante. In ac molestie tortor. Proin convallis, diam facilisis volutpat blandit,</p>
      <p>Quisque quis suscipit augue. Quisque eu augue eu elit imperdiet posuere. Integer tempor metus consectetur interdum porta. Fusce condimentum, metus eu commodo dapibus, diam metus vestibulum lacus,</p>
      <p>Nullam facilisis nibh nec lacinia eleifend. Sed diam mi, tempus vel feugiat ac, venenatis elementum magna. Suspendisse iaculis viverra odio ut dignissim. Nam rhoncus congue bibendum. Maecenas eget metus</p>
      <p>accumsan facilisis. Nam scelerisque auctor mauris, volutpat lobortis tellus molestie et. Ut commodo volutpat venenatis. Donec luctus commodo scelerisque. Pellentesque odio libero, adipiscing et urna blandit, gravida hendrerit sem.</p>
      <div class="dots"><span>...</span>
      </div>
   </div>
</div>

CSS

#div1, #div2, #div3, #div4, #div5, #div6, #div7, #div8, #div9, #div10, #div11,
#div12, #div13, #div14 {
    display: none;
}

.togglediv1 #div1, .togglediv1 #div2, .togglediv1 #div3, .togglediv1 #div4,
.togglediv1 #div5, .togglediv1 #div6, .togglediv1 #div7, .togglediv1 #div8,
.togglediv1 #div9, .togglediv1 #div10, .togglediv1 #div11, .togglediv1 #div12,
.togglediv1 #div13, .togglediv1 #div14 {
    display: block;
}

Script

$("#divtoggle").delegate("a", "click", function (e) {
  var toggled = ($(this).prop("id"));
  $("div#wrap").prop("class", toggled);
});

Answer 1

I'd make a few slight changes to make life easier on yourself. For your buttons... change so that the correct ID in the href as an anchor. E.g.:

<li><a id="togglediv1" href="#div1">Web Design &amp; Build</a></li>

Then i'd simplify your jquery somewhat... how about this (untested):

$(document).ready(function() {

    // On page load hide all divs except first...

    $('.content:not(:first)').hide();

    $('#divtoggle a').click(function(e) {
        $('.content').hide(); // Hide all
        $('.active').removeClass('active');
        var toShow = $(this).attr('href');      
        $(toShow).show();
        $(this).addClass('active');
        e.preventDefault();
    });

});

You can also avoid having all the display:none / display: blocks in the css by doing it all in Javascript.

This way if anyone has javascript disabled it should still work with all items shown, and anchoring down when buttons clicked.

Answer 2

Using the current coding, I would suggest doing something like this:

jsFiddle example

$("#divtoggle a").click(function(){
    $("#wrap").attr("class", $(this).attr('id'));
    $('.active').removeClass('active');
    $(this).addClass('active');
});

---

Alternatively, here is another approach. It is much cleaner as the only CSS used is the styling for the .active class.

Using this approach, all div elements except the first one are hidden by default. An .active class is added to the clicked element, which is then used to determine which div is displayed.

jsFiddle example

$('#divtoggle li:first-child a').addClass('active');
$('.content').hide(); $('#div1').show();
$("#divtoggle a").click(function(){
    var active = (this.id).replace( /^\D+/g, '');
    $('.content').hide(); $('#div' + active).show();
    $('.active').removeClass('active');
    $(this).addClass('active');
});

Answer 3

My own suggestion is the following:

$("#divtoggle").delegate("a", "click", function (e) {
    // don't use jQuery to get the id
    var toggled = this.id;
    $("div#wrap").prop("class", toggled);

    // remove the 'active' class-name from the previously-active element:
    $('.active').removeClass('active');

    // add the active class to the clicked element:
    $(this).addClass('active');
// then we find 'a' elements,
// select only the first,
// and trigger the click event on that element (invoking the above click-handling)
}).find('a').first().click();

JS Fiddle demo.

References:

• addClass().
• click().
• find().
• first().
• removeClass().

Answer 4

Not sure if I'm interpreting your question correctly, but this code will make it so that if you click any list element, the first list element will be removed.

$('li').click(function() {
    $(this).siblings().find('#togglediv1').hide();
});

If you want to remove whatever is first in the list, then you could use this:

$('li').click(function() {
    $(this).siblings(':visible').first().hide();
});

Have a fiddle!

Also maybe consider using newer versions of jQuery if possible.