Deadweight
10-15-2013, 01:17 AM
Title is a little long i admit and i dont know what else to class it but here is the problem...
I have two click function in my jquery:
$('ul#nav_menu').children('li').click(function() {
$('ul#nav_menu').children('li').addClass('normal');
$(this).removeClass('normal').addClass('select');
var name = '#inner_content';
var value = $(this).index();
var content = $('#hidden_content>div:eq('+value+')').html();
$(name).html('').slideUp(100);
$(name).slideDown(300);
$(name).html(content);
});
$('.dropper').children('.sub_title').click(function(){
if($(this).hasClass('closed')){
$(this).removeClass('closed').addClass('opened');
$(this).next('.content').slideDown(300);
}else{
$(this).next('.content').slideUp(300);
$(this).delay(300).queue(function(reset_delay){
$(this).addClass('closed').removeClass('opened');
reset_delay();
});
}
});
However, if i click the first object to change the top tabs it will not allow me to click the drop down buttons. I do not know why what is causing this problem. Any help would be great.
The actual url: http://www.thebcelements.com
The completed code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Body slide</title>
<link rel="stylesheet" href="main.css" />
<script src="jquerymain2-0.js"></script>
<script>
$(function() {
$('ul#nav_menu').children('li').addClass('normal');
$('ul#nav_menu').children('li').first('li').removeClass('normal').addClass('select');
$('#inner_content').html($('#hidden_content>div:eq(0)').html());
$('ul#nav_menu').children('li').click(function() {
$('ul#nav_menu').children('li').addClass('normal');
$(this).removeClass('normal').addClass('select');
var name = '#inner_content';
var value = $(this).index();
var content = $('#hidden_content>div:eq('+value+')').html();
$(name).html('').slideUp(100);
$(name).slideDown(300);
$(name).html(content);
});
$('.dropper').children('.sub_title').click(function(){
if($(this).hasClass('closed')){
$(this).removeClass('closed').addClass('opened');
$(this).next('.content').slideDown(300);
}else{
$(this).next('.content').slideUp(300);
$(this).delay(300).queue(function(reset_delay){
$(this).addClass('closed').removeClass('opened');
reset_delay();
});
}
});
});
</script>
</head>
<body>
<div id="main_body">
<div id="main_header">Title</div>
<div id="nav_wrapper">
<ul id="nav_menu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
<div class="expander"></div>
</div>
<div id="main_content">
<div id="inner_content">
</div>
</div>
<div id="footer">
Randoms
</div>
</div><!-- End Main Body -->
<div id="hidden_content">
<div>
Link 1
<div class="dropper">
<div class="sub_title closed">Sub Group 1</div>
<div class="content">
Content 1
</div>
</div>
<div class="dropper">
<div class="sub_title closed">Sub Group 2</div>
<div class="content">
Content 2
</div>
</div>
<div class="dropper">
<div class="sub_title closed">Sub Group 3</div>
<div class="content">
Content 3
</div>
</div>
<div class="dropper">
<div class="sub_title closed">Sub Group 4</div>
<div class="content">
Content 4
</div>
</div>
</div>
<div>
Link 2
</div>
<div>
Link 3<br /><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sapien nisl, convallis sed vulputate at, pharetra ut tortor. Duis sagittis id eros in pretium. Duis vel fermentum orci, ac ornare nisl. Praesent lorem lacus, aliquam sit amet ante quis, tincidunt rhoncus tellus. Cras lobortis sit amet lacus ut mattis. Vestibulum non risus diam. Praesent quis nunc eu nisi fermentum accumsan. Nam eu tempus eros, molestie sollicitudin sapien. Aliquam erat volutpat. Vivamus felis risus, eleifend et feugiat quis, egestas ac mi.<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sapien nisl, convallis sed vulputate at, pharetra ut tortor. Duis sagittis id eros in pretium. Duis vel fermentum orci, ac ornare nisl. Praesent lorem lacus, aliquam sit amet ante quis, tincidunt rhoncus tellus. Cras lobortis sit amet lacus ut mattis. Vestibulum non risus diam. Praesent quis nunc eu nisi fermentum accumsan. Nam eu tempus eros, molestie sollicitudin sapien. Aliquam erat volutpat. Vivamus felis risus, eleifend et feugiat quis, egestas ac mi.<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sapien nisl, convallis sed vulputate at, pharetra ut tortor. Duis sagittis id eros in pretium. Duis vel fermentum orci, ac ornare nisl. Praesent lorem lacus, aliquam sit amet ante quis, tincidunt rhoncus tellus. Cras lobortis sit amet lacus ut mattis. Vestibulum non risus diam. Praesent quis nunc eu nisi fermentum accumsan. Nam eu tempus eros, molestie sollicitudin sapien. Aliquam erat volutpat. Vivamus felis risus, eleifend et feugiat quis, egestas ac mi.<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sapien nisl, convallis sed vulputate at, pharetra ut tortor. Duis sagittis id eros in pretium. Duis vel fermentum orci, ac ornare nisl. Praesent lorem lacus, aliquam sit amet ante quis, tincidunt rhoncus tellus. Cras lobortis sit amet lacus ut mattis. Vestibulum non risus diam. Praesent quis nunc eu nisi fermentum accumsan. Nam eu tempus eros, molestie sollicitudin sapien. Aliquam erat volutpat. Vivamus felis risus, eleifend et feugiat quis, egestas ac mi.<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sapien nisl, convallis sed vulputate at, pharetra ut tortor. Duis sagittis id eros in pretium. Duis vel fermentum orci, ac ornare nisl. Praesent lorem lacus, aliquam sit amet ante quis, tincidunt rhoncus tellus. Cras lobortis sit amet lacus ut mattis. Vestibulum non risus diam. Praesent quis nunc eu nisi fermentum accumsan. Nam eu tempus eros, molestie sollicitudin sapien. Aliquam erat volutpat. Vivamus felis risus, eleifend et feugiat quis, egestas ac mi.<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sapien nisl, convallis sed vulputate at, pharetra ut tortor. Duis sagittis id eros in pretium. Duis vel fermentum orci, ac ornare nisl. Praesent lorem lacus, aliquam sit amet ante quis, tincidunt rhoncus tellus. Cras lobortis sit amet lacus ut mattis. Vestibulum non risus diam. Praesent quis nunc eu nisi fermentum accumsan. Nam eu tempus eros, molestie sollicitudin sapien. Aliquam erat volutpat. Vivamus felis risus, eleifend et feugiat quis, egestas ac mi.<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sapien nisl, convallis sed vulputate at, pharetra ut tortor. Duis sagittis id eros in pretium. Duis vel fermentum orci, ac ornare nisl. Praesent lorem lacus, aliquam sit amet ante quis, tincidunt rhoncus tellus. Cras lobortis sit amet lacus ut mattis. Vestibulum non risus diam. Praesent quis nunc eu nisi fermentum accumsan. Nam eu tempus eros, molestie sollicitudin sapien. Aliquam erat volutpat. Vivamus felis risus, eleifend et feugiat quis, egestas ac mi.<br /></div>
<div>Link 4</div>
<div>Link 5</div>
</div>
</body>
</html>
I have two click function in my jquery:
$('ul#nav_menu').children('li').click(function() {
$('ul#nav_menu').children('li').addClass('normal');
$(this).removeClass('normal').addClass('select');
var name = '#inner_content';
var value = $(this).index();
var content = $('#hidden_content>div:eq('+value+')').html();
$(name).html('').slideUp(100);
$(name).slideDown(300);
$(name).html(content);
});
$('.dropper').children('.sub_title').click(function(){
if($(this).hasClass('closed')){
$(this).removeClass('closed').addClass('opened');
$(this).next('.content').slideDown(300);
}else{
$(this).next('.content').slideUp(300);
$(this).delay(300).queue(function(reset_delay){
$(this).addClass('closed').removeClass('opened');
reset_delay();
});
}
});
However, if i click the first object to change the top tabs it will not allow me to click the drop down buttons. I do not know why what is causing this problem. Any help would be great.
The actual url: http://www.thebcelements.com
The completed code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Body slide</title>
<link rel="stylesheet" href="main.css" />
<script src="jquerymain2-0.js"></script>
<script>
$(function() {
$('ul#nav_menu').children('li').addClass('normal');
$('ul#nav_menu').children('li').first('li').removeClass('normal').addClass('select');
$('#inner_content').html($('#hidden_content>div:eq(0)').html());
$('ul#nav_menu').children('li').click(function() {
$('ul#nav_menu').children('li').addClass('normal');
$(this).removeClass('normal').addClass('select');
var name = '#inner_content';
var value = $(this).index();
var content = $('#hidden_content>div:eq('+value+')').html();
$(name).html('').slideUp(100);
$(name).slideDown(300);
$(name).html(content);
});
$('.dropper').children('.sub_title').click(function(){
if($(this).hasClass('closed')){
$(this).removeClass('closed').addClass('opened');
$(this).next('.content').slideDown(300);
}else{
$(this).next('.content').slideUp(300);
$(this).delay(300).queue(function(reset_delay){
$(this).addClass('closed').removeClass('opened');
reset_delay();
});
}
});
});
</script>
</head>
<body>
<div id="main_body">
<div id="main_header">Title</div>
<div id="nav_wrapper">
<ul id="nav_menu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
<div class="expander"></div>
</div>
<div id="main_content">
<div id="inner_content">
</div>
</div>
<div id="footer">
Randoms
</div>
</div><!-- End Main Body -->
<div id="hidden_content">
<div>
Link 1
<div class="dropper">
<div class="sub_title closed">Sub Group 1</div>
<div class="content">
Content 1
</div>
</div>
<div class="dropper">
<div class="sub_title closed">Sub Group 2</div>
<div class="content">
Content 2
</div>
</div>
<div class="dropper">
<div class="sub_title closed">Sub Group 3</div>
<div class="content">
Content 3
</div>
</div>
<div class="dropper">
<div class="sub_title closed">Sub Group 4</div>
<div class="content">
Content 4
</div>
</div>
</div>
<div>
Link 2
</div>
<div>
Link 3<br /><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sapien nisl, convallis sed vulputate at, pharetra ut tortor. Duis sagittis id eros in pretium. Duis vel fermentum orci, ac ornare nisl. Praesent lorem lacus, aliquam sit amet ante quis, tincidunt rhoncus tellus. Cras lobortis sit amet lacus ut mattis. Vestibulum non risus diam. Praesent quis nunc eu nisi fermentum accumsan. Nam eu tempus eros, molestie sollicitudin sapien. Aliquam erat volutpat. Vivamus felis risus, eleifend et feugiat quis, egestas ac mi.<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sapien nisl, convallis sed vulputate at, pharetra ut tortor. Duis sagittis id eros in pretium. Duis vel fermentum orci, ac ornare nisl. Praesent lorem lacus, aliquam sit amet ante quis, tincidunt rhoncus tellus. Cras lobortis sit amet lacus ut mattis. Vestibulum non risus diam. Praesent quis nunc eu nisi fermentum accumsan. Nam eu tempus eros, molestie sollicitudin sapien. Aliquam erat volutpat. Vivamus felis risus, eleifend et feugiat quis, egestas ac mi.<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sapien nisl, convallis sed vulputate at, pharetra ut tortor. Duis sagittis id eros in pretium. Duis vel fermentum orci, ac ornare nisl. Praesent lorem lacus, aliquam sit amet ante quis, tincidunt rhoncus tellus. Cras lobortis sit amet lacus ut mattis. Vestibulum non risus diam. Praesent quis nunc eu nisi fermentum accumsan. Nam eu tempus eros, molestie sollicitudin sapien. Aliquam erat volutpat. Vivamus felis risus, eleifend et feugiat quis, egestas ac mi.<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sapien nisl, convallis sed vulputate at, pharetra ut tortor. Duis sagittis id eros in pretium. Duis vel fermentum orci, ac ornare nisl. Praesent lorem lacus, aliquam sit amet ante quis, tincidunt rhoncus tellus. Cras lobortis sit amet lacus ut mattis. Vestibulum non risus diam. Praesent quis nunc eu nisi fermentum accumsan. Nam eu tempus eros, molestie sollicitudin sapien. Aliquam erat volutpat. Vivamus felis risus, eleifend et feugiat quis, egestas ac mi.<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sapien nisl, convallis sed vulputate at, pharetra ut tortor. Duis sagittis id eros in pretium. Duis vel fermentum orci, ac ornare nisl. Praesent lorem lacus, aliquam sit amet ante quis, tincidunt rhoncus tellus. Cras lobortis sit amet lacus ut mattis. Vestibulum non risus diam. Praesent quis nunc eu nisi fermentum accumsan. Nam eu tempus eros, molestie sollicitudin sapien. Aliquam erat volutpat. Vivamus felis risus, eleifend et feugiat quis, egestas ac mi.<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sapien nisl, convallis sed vulputate at, pharetra ut tortor. Duis sagittis id eros in pretium. Duis vel fermentum orci, ac ornare nisl. Praesent lorem lacus, aliquam sit amet ante quis, tincidunt rhoncus tellus. Cras lobortis sit amet lacus ut mattis. Vestibulum non risus diam. Praesent quis nunc eu nisi fermentum accumsan. Nam eu tempus eros, molestie sollicitudin sapien. Aliquam erat volutpat. Vivamus felis risus, eleifend et feugiat quis, egestas ac mi.<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sapien nisl, convallis sed vulputate at, pharetra ut tortor. Duis sagittis id eros in pretium. Duis vel fermentum orci, ac ornare nisl. Praesent lorem lacus, aliquam sit amet ante quis, tincidunt rhoncus tellus. Cras lobortis sit amet lacus ut mattis. Vestibulum non risus diam. Praesent quis nunc eu nisi fermentum accumsan. Nam eu tempus eros, molestie sollicitudin sapien. Aliquam erat volutpat. Vivamus felis risus, eleifend et feugiat quis, egestas ac mi.<br /></div>
<div>Link 4</div>
<div>Link 5</div>
</div>
</body>
</html>