Jump to content

jquery showhide menu list


blacknight

Recommended Posts

so im worken on my site maken a menu switching from tab content to jquery and i have an issue.

 

my menu works the way i want sub menus show proper swwitching occures for classes .. but the main content will not become visable when a li tag is clicked

 

here is my menu code

 

<div id="rp_menu">
<ul style="display:block">
	<li class="selected" id="81" ><a href="javascript:void(0)" >Feats of Strength</a></li>
	<li id="95"><a href="javascript:void(0)" >Player vs. Player</a>
		<ul id="s95">
			<li id="s165"><div class="link"><a href="javascript:void(0)" onclick="return false;">Arena</a></div></li>
			<li id="s14801"><div class="link"><a href="javascript:void(0)" onclick="return false;">Alterac Valley</a></div></li>
			<li id="s14802"><div class="link"><a href="javascript:void(0)" onclick="return false;">Arathi Basin</a></div></li>
			<li id="s14803"><div class="link"><a href="javascript:void(0)" onclick="return false;">Eye of the Storm</a></div></li>
			<li id="s14804"><div class="link"><a href="javascript:void(0)" onclick="return false;">Warsong Gulch</a></div></li>
			<li id="s14881"><div class="link"><a href="javascript:void(0)" onclick="return false;">Strand of the Ancients</a></div></li>
			<li id="s14901"><div class="link"><a href="javascript:void(0)" onclick="return false;">Wintergrasp</a></div></li>
			<li id="s15003"><div class="link"><a href="javascript:void(0)" onclick="return false;">Isle of Conquest</a></div></li>
			<li id="s15073"><div class="link"><a href="javascript:void(0)" onclick="return false;">Battle for Gilneas</a></div></li>
			<li id="s15074"><div class="link"><a href="javascript:void(0)" onclick="return false;">Twin Peaks</a></div></li>
			<li id="s15075"><div class="link"><a href="javascript:void(0)" onclick="return false;">Tol Barad</a></div></li>
			<li id="s15092"><div class="link"><a href="javascript:void(0)" onclick="return false;">Rated Battleground</a></div></li>
		</ul>
	</li>

	<li id="96" ><a href="javascript:void(0)">Quests</a>
		<ul id="s96" >
			<li id="s14861" ><a href="javascript:void(0)">Eastern Kingdoms</a></li>
			<li id="s14862" ><a href="javascript:void(0)">Outland</a></li>
			<li id="s14863" ><a href="javascript:void(0)">Northrend</a></li>
			<li id="s15070" ><a href="javascript:void(0)">Cataclysm</a></li>
			<li id="s15081" ><a href="javascript:void(0)">Kalimdor</a></li>
		</ul>
	</li>

	<li id="97" ><a href="javascript:void(0)">Exploration</a>
		<ul id="s97" >
			<li id="s14777" ><a href="javascript:void(0)">Eastern Kingdoms</a></li>
			<li id="s14778" ><a href="javascript:void(0)">Kalimdor</a></li>
			<li id="s14779" ><a href="javascript:void(0)">Outland</a></li>
			<li id="s14780" ><a href="javascript:void(0)">Northrend</a></li>
			<li id="s15069" ><a href="javascript:void(0)">Cataclysm</a></li>
		</ul>
	</li>

	<li id="155" ><a href="javascript:void(0)">World Events</a>
		<ul id="s155" >
			<li id="s156" ><a href="javascript:void(0)">Winter Veil</a></li>
			<li id="s158" ><a href="javascript:void(0)">Hallow's End</a></li>
			<li id="s159" ><a href="javascript:void(0)">Noblegarden</a></li>
			<li id="s160" ><a href="javascript:void(0)">Lunar Festival</a></li>
			<li id="s161" ><a href="javascript:void(0)">Midsummer</a></li>
			<li id="s162" ><a href="javascript:void(0)">Brewfest</a></li>
			<li id="s163" ><a href="javascript:void(0)">Children's Week</a></li>
			<li id="s187" ><a href="javascript:void(0)">Love is in the Air</a></li>
			<li id="s14941" ><a href="javascript:void(0)">Argent Tournament</a></li>
			<li id="s14981" ><a href="javascript:void(0)">Pilgrim's Bounty</a></li>
		</ul>
	</li>

	<li id="168" ><a href="javascript:void(0)">Dungeons & Raids</a>
		<ul id="s168" >
			<li id="s14805" ><a href="javascript:void(0)">The Burning Crusade</a></li>
			<li id="s14806" ><a href="javascript:void(0)">Lich King Dungeon</a></li>
			<li id="s14808" ><a href="javascript:void(0)">Classic</a></li>
			<li id="s14922" ><a href="javascript:void(0)">Lich King Raid</a></li>
			<li id="s15067" ><a href="javascript:void(0)">Cataclysm Dungeon</a></li>
			<li id="s15068" ><a href="javascript:void(0)">Cataclysm Raid</a></li>
		</ul>
	</li>

	<li id="169" ><a href="javascript:void(0)">Professions</a>
		<ul id="s169" >
			<li id="s170" ><a href="javascript:void(0)">Cooking</a></li>
			<li id="s171" ><a href="javascript:void(0)">Fishing</a></li>
			<li id="s172" ><a href="javascript:void(0)">First Aid</a></li>
			<li id="s15071" ><a href="javascript:void(0)">Archaeology</a></li>
		</ul>
	</li>

	<li id="201" ><a href="javascript:void(0)">Reputation</a>
		<ul id="s201" >
			<li id="s14864" ><a href="javascript:void(0)">Classic</a></li>
			<li id="s14865" ><a href="javascript:void(0)">The Burning Crusade</a></li>
			<li id="s14866" ><a href="javascript:void(0)">Wrath of the Lich King</a></li>
			<li id="s15072" ><a href="javascript:void(0)">Cataclysm</a></li>
		</ul>
	</li>

</ul>
</div>

 

 

then this is my js code

 

$(document).ready(function () {

$("#amain div#s81").show(); //Show first tab content
    $('#rp_menu > ul > li > ul').hide();

$('#rp_menu ul li').click( function() {	
$('#amain div').hide();
$("#rp_menu > ul > li").removeClass(" selected"); //Remove any "active" class
$(this).addClass(" selected"); //Add "active" class to selected tab
var target2 = 's'+this.id;			 // Use ID-selectors to toggle a single element.			
$('#amain div#'+target2+'').show();
$('#rp_menu > ul > li > ul').hide();	
	if ($('#rp_menu > ul > li#'+this.id+' > ul'))
	{
		$('#rp_menu > ul > li#'+this.id+' > ul').show();
	}		
});

$('#rp_menu ul li ul li').click( function() {
$('#amain div').hide();	
$("#rp_menu > ul > li > ul > li").removeClass(" selected"); //Remove any "active" class
$(this).addClass(" selected"); //Add "active" class to selected tab
var target2 = 'sub'+this.id;			 // Use ID-selectors to toggle a single element.			
$('#amain div#'+target2).show();		 
});

});

 

the contents im trying to open are in a dev id as amain any ideas?

Link to comment
https://forums.phpfreaks.com/topic/242597-jquery-showhide-menu-list/
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.