First li is not displaying active content

Question

Hi I am primarily a designer but have taken it upon myself to understand what goes on under the hood to help me design better websites.

This is the first website I have designed and built from scratch and all is going well until I hit this problem with the active state of a ul li.

Here is a link to the beta version: http://www.philmckeith.com/stonebridge/2012/4-bedroom-house-the-york-bingley.html.

The box with the dropdown is where the nested content is currently.

HTML:

<div id="dd" class="wrapper-dropdown-2" tabindex="1">
<span>House Types</span>
 <ul class="dropdown">
  <li id="dd1"><a href="javascript:void(0);">Chester</a></li>
  <li id="dd2"><a href="javascript:void(0);">Durham</a></li>
  <li id="dd3"><a href="javascript:void(0);">York</a></li>
  <li id="dd4"><a href="javascript:void(0);">Westminister</a></li>
  <li id="dd5"><a href="javascript:void(0);">Ripon</a></li>
 </ul>
 </div>

<div id="content1" class="content"><img src="images/new-homes-bingley-chester-plan.png"></div>
<div id="content2" class="content"><img src="images/new-homes-bingley-durham-plan.png"></div>
<div id="content3" class="content"><img src="images/new-homes-bingley-york-plan.png"></div>
<div id="content4" class="content"><img src="images/new-homes-bingley-westminister-plan.png"</div>
<div id="content5" class="content"><img src="images/new-homes-bingley-ripon-plan.png"></div>

Javascript Selector:

$(document).ready(function() {
//Active first link
//var activeId = $(".active").attr("id").replace("dd",""); $("#content" + activeId).show();
$("#dd a").click(function() {

  //reset
$(".content").hide(); //Hide all content
  $("ul.dropdown li:first").addClass("active").show(); //Activate first tab
  $(".content:first").show(); //Show first tab content
  $("#dd .active").removeClass("active");

  //act
  $(this).addClass("active")
  var id = $(this).closest("li").attr("id").replace("dd","");
  $("#content" + id).show();
});   
});

Javascript toggle:

function DropDown(el) {
            this.dd = el;
            this.initEvents();
        }
        DropDown.prototype = {
            initEvents : function() {
                var obj = this;

                obj.dd.on('click', function(event){
                    $(this).toggleClass('active');
                    event.stopPropagation();
                }); 
            }
        }

        $(function() {

            var dd = new DropDown( $('#dd') );

            $(document).click(function() {
                // all dropdowns
                $('.wrapper-dropdown-2').removeClass('active');

});
});

The styled ul dropdown selects the hidden content ok but does not display the first li content on page load. The closet article I found on stackoverflow was this solution. using jquery to change visibility of divs with nested content, onclick

I have tried the following but no luck as of yet:

$('li').eq(0).addClass("active");

I'm guessing my toggle script and selector script are conflicting or duplicating somehow but unsure how to fix this. Any help / advice / articles is much appreciated.

st3inn · Accepted Answer · 2012-10-10T09:07:02.863

2

try changing "JavaScript Selector" to this:

(

$(document).ready(function() {
    $("#dd a").click(function() {
        //reset
        $(".content").hide(); //Hide all content
        $("ul.dropdown li:first").addClass("active").show(); //Activate first tab
        $(".content:first").show(); //Show first tab content
        $("#dd .active").removeClass("active");

        //act
        $(this).addClass("active")
        var id = $(this).closest("li").attr("id").replace("dd","");
        $("#content" + id).show();
    });
    $("#dd1 a").click();            // selects the first house type
});

edited Oct 10 '12 at 09:07

answered Oct 09 '12 at 16:09

st3inn

1,556
9
17

Thanks for this St3inn much appreciated. Worked for the selector but created a problem in the toggle script. It makes the dropdown stick over the top of the content until it is clicked again. I have updated the beta version link to display what I mean: [link]( http://www.philmckeith.com/stonebridge/2012/4-bedroom-house-the-york-bingley.html). Will try and find a way past this but if anyone has any ideas I would welcome them. – PMckeith Oct 09 '12 at 19:59
By removing one of the #dd from line 6 of your answer corrects the bug I've just posted above. Unless there is a reason for the 2 double dd no pun intended :) – PMckeith Oct 09 '12 at 20:58
Thought it would be neccessary (to reference the #dd itself in addition to the .active) but evidently it wasn't :) the only case I've heard of where it's possible to have too many dd's ;) – st3inn Oct 10 '12 at 09:10

First li is not displaying active content

1 Answers1