Jump to content

How do i fade this background when adding the class.


Recommended Posts

HTML:

<div id="quick-links-container"><div id="quick-links"><ul>    <li><span id="website-design" class="active">Website Design</span></li>    <li><span id="graphic-design">Graphic Design</span></li>    <li><span id="wordpress">Wordpress</span></li></ul></div><div id="quick-information"><div class="website-design"><h3>Website Design</h3>    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>    <br /><a href="#">Website Design</a></div><div class="graphic-design"><h3>Graphic Design</h3>    <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p><br /><a href="#">Graphic Design</a></div><div class="wordpress"><h3>Wordpress</h3>    <p>A massive open source CMS with thousands of secure plug-ins to choose from to customize your website. Wordpress also allows you to manage your website’s content from anywhere between a personal blog to a distinguished online store.</p><br /><a href="#">Wordpress.org</a></div></div><div class="both"></div></div>

CSS:

#quick-links-container{width:960px; height:205px;}#quick-links-container #quick-links{width:200px; display:block; float:left; margin: 0 20px; padding-right:40px;}#quick-links ul{list-style: none;}#quick-links ul li{}#quick-links ul li span{    cursor:pointer;    width:200px;    height:35px;    line-height:35px;    display:block;    margin:10px 0;    padding:10px 20px;    background-color:#e4e4e4;    color:#333333;    text-shadow: 1px 1px 1px #FFF;    text-decoration:none;    font-family:Palatino Linotype;    font-style:italic;    font-size:18px;}#quick-links li span.active{    background-color:#fcae00;    color:#FFFFFF;    text-shadow: 1px 1px 1px #eea607;}#quick-information{overflow: hidden;height:200px;width: 630px;margin-left: 50px;}#quick-information h3{color:#fcae00; font-family:"Palatino Linotype"; font-style: italic; font-size:24px; margin-top: 10px; margin-left:20px;}#quick-information p{color:#505050; padding:20px 10px 0 20px; font-family:Palatino Linotype; font-size:17px;}#quick-information a{color:#FFFFFF; background-color:#3B3B3B; padding:5px 8px; margin-left:20px; text-decoration:none;font-family:Palatino Linotype; font-style:oblique; font-style:italic; font-size:18px; line-height:35px;}

jQuery:

$(document).ready(function(){    $("#quick-information div").not($("#quick-information div").eq(0)).hide();     $('#quick-links ul li span').click(function(){  $("#quick-information div").slideUp();  $('#quick-links ul li span').removeClass('active');  $(this).addClass('active');	  var classref= $(this).attr("id");	  $("#quick-information ."+classref).slideDown();  });   });

OR http://jsfiddle.net/attilahajzer/B4xZ3/2/

Link to post
Share on other sites

HTML

<div id="quick-links-container"><div id="quick-links"><ul>	<li><b></b><span id="website-design" class="active">Website Design</span></li>	<li><b></b><span id="graphic-design">Graphic Design</span></li>	<li><b></b><span id="wordpress">Wordpress</span></li></ul></div><div id="quick-information"><div class="website-design"><h3>Website Design</h3>	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>	<br /><a href="#">Website Design</a></div><div class="graphic-design"><h3>Graphic Design</h3>	<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p><br /><a href="#">Graphic Design</a></div><div class="wordpress"><h3>Wordpress</h3>	<p>A massive open source CMS with thousands of secure plug-ins to choose from to customize your website. Wordpress also allows you to manage your website’s content from anywhere between a personal blog to a distinguished online store.</p><br /><a href="#">Wordpress.org</a></div></div><div class="both"></div></div>

CSS

#quick-links-container{width:960px; height:205px;}#quick-links-container #quick-links{width:200px; display:block; float:left; margin: 0 20px; padding-right:40px;}#quick-links ul{list-style: none;}#quick-links ul li{position:relative; height:55px; width:240px; margin:5px 0; }#quick-links ul li span, #quick-links ul li b{	cursor:pointer;	width:240px;	height:55px;	line-height:55px;	display:block;	/*margin:5px 0;*/	padding:0;	background-color:#e4e4e4;	color:#333333;	text-shadow: 1px 1px 1px #FFF;	text-decoration:none;	font-family:Palatino Linotype;	font-style:italic;	font-size:18px;	text-indent:20px;}#quick-links li span.active{	background-color:#fcae00;	color:#FFFFFF;	text-shadow: 1px 1px 1px #eea607;}#quick-information{overflow: hidden;height:200px;width: 630px;margin-left: 50px;} #quick-information h3{color:#fcae00; font-family:"Palatino Linotype"; font-style: italic; font-size:24px; margin-top: 10px; margin-left:20px;}#quick-information p{color:#505050; padding:20px 10px 0 20px; font-family:Palatino Linotype; font-size:17px;}#quick-information a{color:#FFFFFF; background-color:#3B3B3B; padding:5px 8px; margin-left:20px; text-decoration:none;font-family:Palatino Linotype; font-style:oblique; font-style:italic; font-size:18px; line-height:35px;} #quick-links ul li b {	background-color: #E4E4E4;font-weight:normal;	width:240px;	height:100%;	display:none;	position:absolute;	top:0;	left:0;}

JQuery

$(document).ready(function(){	$("#quick-information div").not($("#quick-information div").eq(0)).hide();    $("#quick-links ul li b").not($("#quick-links ul li b").eq(0)).show();	$('#quick-links ul li span').each(function(){		$(this).prev("b").html($(this).html());	});		  $('#quick-links ul li b').click(function(){	  $("#quick-links ul li b").show();	  $(this).fadeOut("slow");  $("#quick-information div").slideUp();  $('#quick-links ul li span').removeClass('active');  $(this).next("span").addClass('active'); 	  var classref= $(this).next("span").attr("id");	  $("#quick-information ."+classref).slideDown();  });	});

Edited by dsonesuk
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...