dsleeth2011
New Member
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:\[code\]<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="http://stackoverflow.com/questions/12803743/images/new-homes-bingley-chester-plan.png"></div><div id="content2" class="content"><img src="http://stackoverflow.com/questions/12803743/images/new-homes-bingley-durham-plan.png"></div><div id="content3" class="content"><img src="http://stackoverflow.com/questions/12803743/images/new-homes-bingley-york-plan.png"></div><div id="content4" class="content"><img src="http://stackoverflow.com/questions/12803743/images/new-homes-bingley-westminister-plan.png"</div><div id="content5" class="content"><img src="http://stackoverflow.com/questions/12803743/images/new-homes-bingley-ripon-plan.png"></div>\[/code\]Javascript Selector:\[code\]$(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();}); });\[/code\]Javascript toggle:\[code\]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');});});\[/code\]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, onclickI have tried the following but no luck as of yet:\[code\]$('li').eq(0).addClass("active");\[/code\]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.