Kathirvel K

Posts Tagged ‘jQuery

HTML:
<ul id=”topnav”>
<li><a href=”#”>Home</a>
<ul>
<li><a href=”home.html”>Submenu</a></li>
<li><a href=”Submenu1.html”>Submenu1</a></li>
<li><a href=”Submenu2.html”>Submenu2</a></li>
</ul>
</li>
<li><a href=”#”>Nav 2</a>
<ul>
<li><a href=”nav2.html”>Nav2</a></li>
<li><a href=”Submenu3.html”>Submenu3</a></li>
<li><a href=”Submenu4.html”>Submenu4</a></li>
</ul>
</li>
</ul>

jQuery Script:
<script type=”text/javascript”>
$(document).ready(function() {
//
$(‘#topnav ul li’).each(function () {
if (window.location.href.indexOf($(this).find(‘a:first’).attr(‘href’)) > -1) {
$(this).closest(‘ul’).closest(‘li’).attr(‘class’,’active’)
$(this).addClass(‘active’).siblings().removeClass(‘active’);
}
});
//
});
</script>

CSS:
#topnav li.active {background:#222; color:#fff;}
#topnav ul li.active a{ background:#007dba none; color:#fff; }

jQuery Code:

<script type="text/javascript" >
jQuery(document).ready(function()
{
jQuery(".AccordionMenu .AccordionHeader").click(function()
	{
	jQuery(this).css({backgroundImage:"url(Open.png)"}).next("div.AccordionContent").slideDown('slow', function() {
	if (jQuery(this).is(':visible')) {
		jQuery(this).siblings("div.AccordionContent").slideUp("slow").siblings(".AccordionHeader").css({backgroundImage:"url(Close.png)"});
		jQuery(this).prev(".AccordionHeader").css({backgroundImage:"url(Open.png)"})
	} else {
		jQuery(this).siblings(".AccordionHeader").css({backgroundImage:"url(Close.png)"});
	}

});
	});
});
</script>

CSS Code:

<style>
.AccordionHeader { background: transparent  url(Close.png) center right  no-repeat;  position:relative;padding: 7px 10px; cursor: pointer;  margin:1px; font-weight:bold;color:#FFFFFF;height: 22px;  }
.AccordionContent { display:none;  background: #FFFFFF !important; border: 1px solid #B0C5CE; padding: 5px; }
</style>

HTML Code:

    <div class="AccordionHeader">My Header </div>
    <div class="AccordionContent">
    <p>
    -- your content goes here --
    </p>
    <div>

    <div class="AccordionHeader">My Header </div>
    <div class="AccordionContent">
    <p>
    -- your content goes here --
    </p>
    <div>

    <div class="AccordionHeader">My Header </div>
    <div class="AccordionContent">
    <p>
    -- your content goes here --
    </p>
    <div>

    <div class="AccordionHeader">My Header </div>
    <div class="AccordionContent">
    <p>
    -- your content goes here --
    </p>
    <div>

This is explained how to do show more / show less option using jQuery for dynamically generated texts/links/lists.

jQuery code:

<script type="text/javascript" >
jQuery(function() {
var adjustheight = 40; var moreText = "Show More";
var lessText = "Show Less";
jQuery(".more-less .more-block").css('height', adjustheight).css('overflow', 'hidden');
var listItem_size = jQuery(".more-block a").length
if (listItem_size < = 8 ) {
if (listItem_size < = 4 ) {
jQuery(this).find(".more-block").css('height', adjustheight1).css('overflow', 'hidden');
}
} else {
jQuery(".more-less").append('');
jQuery("a.adjust").text(moreText);
}
jQuery(".adjust").toggle(function() {
jQuery(this).parents("div:first").find(".more-block").css('height', 'auto').css('overflow', 'visible');
jQuery(this).text(lessText);
}, function() {
jQuery(this).parents("div:first").find(".more-block").css('height', adjustheight).css('overflow', 'hidden');
jQuery(this).text(moreText);
});
});
</script>

CSS Code:

<style>
#Tabs a.adjust{text-align:center; padding:5px;background: #333333 ; color:#FFFFFF; font-size:11px ; display:block ; width:65px ; cursor:pointer; height: 13px;line-height: 13px ; text-decoration:none; clear:both;} #Tabs { padding: 0 0 2px 0; margin: 0; display:block;border:1px solid #999999; padding:6px; float: left; width:550px; clear:both;} #Tabs ul{ display: block;float: left;margin: 0; padding: 0;} #Tabs ul li{float:left; width:130px; list-style:none;} #Tabs a{text-align:center; padding: 3px 10px;margin:5px;display:block;text-decoration: underline;font-size: 11px; color:#800000; word-wrap: break-word; float:left; width:100px; } #Tabs a:hover{background:#A41B1B; color:#FFFFFF; text-decoration:none;} </style>

HTML Code:

 <div class="more-less">
  <div class="more-block">
  <ul>
  <li><a href="#"> Sample Link </a>
  <li><a href="#"> Sample Link </a>
  <li><a href="#"> Sample Link </a>
  <li><a href="#"> Sample Link </a>
  <li><a href="#"> Sample Link </a>
  <li><a href="#"> Sample Link </a>
  </ul>
  <div>
</div>