jQuery Toggle
jQuery Toggle - should close only on clicking the header
HTML
<article class="detail" id="navtogg">
<h4></h4>
<ul class="toggle-view mright">
<li>
<h6 class="toggle">Application Details</h6>
<div class="t">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida.</p>
</div>
</li>
<li>
<h6 class="toggle">Update Application Issues</h6>
<div class="t">
<div class="">
<ul class="tabs tableLayoutTabs">
<li class="active"><a href="#tab1">Test</a></li>
<li class=""><a href="#tab2">Retest 1</a></li>
<li class=""><a href="#tab3">Retest 2</a></li>
<li class=""><a href="#tab4">Retest 3</a></li>
<li class=""><a href="#tab5">Retest 4</a></li>
</ul>
<div class="tab_container">
<div class="tab_content" id="tab1" style="display: block;">
<ul class="toggle-view2 mright">
<li>
<h6 class="toggle2">Add Issues to Application</h6>
<div class="t2">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida.</p>
</div>
</li>
<li>
<h6 class="toggle2">Update Issues in Application</h6>
<div class="t2">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida.</p>
</div>
</li>
<li>
<h6 class="toggle2">Update Screenshots</h6>
<div class="t2">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida.</p>
</div>
</li>
</ul>
</div>
<div class="tab_content" id="tab2" style="display: none;">
<h6>Heading</h6>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat....
CSS
/*toggle*/
.toggle-view li { margin-bottom: 10px; position: relative; cursor: pointer; overflow: hidden; }
.toggle { padding: 7px 8px 7px 30px; margin: 0; border: 1px solid #ddd; text-shadow: 0 1px 0 #fff; background: #F3F3F3; background: -moz-linear-gradient(top, #f6f6f6 0%, #efefef 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f6f6), color-stop(100%,#efefef)); background: -webkit-linear-gradient(top, #f6f6f6 0%,#efefef 100%); background: -o-linear-gradient(top, #f6f6f6 0%,#efefef 100%); background: -ms-linear-gradient(top, #f6f6f6 0%,#efefef 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#efefef',GradientType=0 ); background: linear-gradient(top, #f6f6f6 0%,#efefef 100%); }
.toggle:hover { border-color: #BBB }
.tactive { color: #333; border-color: #CCC; -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }
.t { display: none; padding: 10px; }
/*toggle2*/
.toggle-view2 li { margin-bottom: 10px; position: relative; cursor: pointer; overflow: hidden; }
.toggle2 { padding: 7px 8px 7px 30px; margin: 0; border: 1px solid #ddd; text-shadow: 0 1px 0 #fff; background: #F3F3F3; background: -moz-linear-gradient(top, #f6f6f6 0%, #efefef 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f6f6), color-stop(100%,#efefef)); background: -webkit-linear-gradient(top, #f6f6f6 0%,#efefef 100%); background: -o-linear-gradient(top, #f6f6f6 0%,#efefef 100%); background: -ms-linear-gradient(top, #f6f6f6 0%,#efefef 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#efefef',GradientType=0 ); background: linear-gradient(top, #f6f6f6 0%,#efefef 100%); }
.toggle2:hover { border-color: #BBB }
.tactive2 { color: #333; border-color: #CCC; -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 0...
JavaScript
$(document).ready(function() {
// Slide
if (jQuery().slides) {
$("#slides").slides({
preload: true,
preloadImage: 'img/loading.gif',
generateNextPrev: true,
pagination: false,
generatePagination: false,
play: 2500,
slideSpeed:'slow'
});
};
// Smooth scrolling - css-tricks.com
function filterPath(string){return string.replace(/^\//,'').replace(/(index|default).[a-zA-Z]{3,4}$/,'').replace(/\/$/,'');}var locationPath=filterPath(location.pathname);var scrollElem=scrollableElement('html','body');$('a[href*=#nav]').each(function(){var thisPath=filterPath(this.pathname)||locationPath;if(locationPath==thisPath&&(location.hostname==this.hostname||!this.hostname)&&this.hash.replace(/#/,'')){var $target=$(this.hash),target=this.hash;if(target){var targetOffset=$target.offset().top;$(this).click(function(event){event.preventDefault();$(scrollElem).animate({scrollTop:targetOffset},'slow',function(){location.hash=target;});});}}});function scrollableElement(els){for(var i=0,argLength=arguments.length;i<argLength;i++){var el=arguments[i],$scrollElement=$(el);if($scrollElement.scrollTop()>0){return el;}else{$scrollElement.scrollTop(1);var isScrollable=$scrollElement.scrollTop()>0;$scrollElement.scrollTop(0);if(isScrollable){return el;}}}return[];}
//TOGGLE
$('.toggle-view li').click(function () {
var text = $(this).children('.t');
if (text.is(':hidden')) {
text.slideDown('fast');
$(this).children('.toggle').addClass('tactive');
} else {
text.slideUp('fast');
$(this).children('.toggle').removeClass('tactive');
}
});
//TOGGLE L2
$('.toggle-view2 li').click(function () {
var text2 = $(this).children('.t2');
if (text2.is(':hidden')) {
text2.slideDown('fast');
$(this).children('.toggle2').addClass('tactive2');
} else {
text2.slideUp('fast');
...