Reputation: 5923
I want to executes some jquery functions when clicking on an anchor tag and then proceeds to go wherever the hyperlink href was taking it.
<li><a href="#3">3. Lorem</a></li>
When I click on this, I execute collapse to open the relative accordion for this anchor, then the hyperlink href event after collapse()
with location.href = $(this).attr('href');
:
$('ul > li:nth-child(3)').click(function(e){
$('div[id*="content-"]:not(#content-3)').collapse('hide');
$('#content-3').collapse('show', function(){
e.preventDefault();
location.href = $(this).attr('href');
});
});
But it does not work. When I click on a link opens the accordion but it doesn't scroll to the anchor.
Any help is appreciated!
$('ul > li:nth-child(1)').click(function(e){
$('div[id*="content-"]:not(#content-1)').collapse('hide');
$('#content-1').collapse('show', function(){
e.preventDefault();
location.href = $(this).attr('href');
});
});
$('ul > li:nth-child(2)').click(function(e){
$('div[id*="content-"]:not(#content-2)').collapse('hide');
$('#content-2').collapse('show', function(){
e.preventDefault();
location.href = $(this).attr('href');
});
});
$('ul > li:nth-child(3)').click(function(e){
$('div[id*="content-"]:not(#content-3)').collapse('hide');
$('#content-3').collapse('show', function(){
e.preventDefault();
location.href = $(this).attr('href');
});
});
$('ul > li:nth-child(4)').click(function(e){
$('div[id*="content-"]:not(#content-4)').collapse('hide');
$('#content-4').collapse('show', function(){
e.preventDefault();
location.href = $(this).attr('href');
});
});
$('ul > li:nth-child(5)').click(function(e){
$('div[id*="content-"]:not(#content-5)').collapse('hide');
$('#content-5').collapse('show', function(){
e.preventDefault();
location.href = $(this).attr('href');
});
});
$('ul > li:nth-child(6)').click(function(e){
$('div[id*="content-"]:not(#content-6)').collapse('hide');
$('#content-6').collapse('show', function(){
e.preventDefault();
location.href = $(this).attr('href');
});
});
$('ul > li:nth-child(7)').click(function(e){
$('div[id*="content-"]:not(#content-7)').collapse('hide');
$('#content-7').collapse('show', function(){
e.preventDefault();
location.href = $(this).attr('href');
});
});
$('ul > li:nth-child(8)').click(function(e){
$('div[id*="content-"]:not(#content-8)').collapse('hide');
$('#content-8').collapse('show', function(){
e.preventDefault();
location.href = $(this).attr('href');
});
});
$('ul > li:nth-child(9)').click(function(e){
$('div[id*="content-"]:not(#content-9)').collapse('hide');
$('#content-9').collapse('show', function(){
e.preventDefault();
location.href = $(this).attr('href');
});
});
$('ul > li:nth-child(10)').click(function(e){
$('div[id*="content-"]:not(#content-10)').collapse('hide');
$('#content-10').collapse('show', function(){
e.preventDefault();
location.href = $(this).attr('href');
});
});
$('ul > li:nth-child(11)').click(function(e){
$('div[id*="content-"]:not(#content-11)').collapse('hide');
$('#content-11').collapse('show', function(){
e.preventDefault();
location.href = $(this).attr('href');
});
});
$('ul > li:nth-child(12)').click(function(e){
$('div[id*="content-"]:not(#content-12)').collapse('hide');
$('#content-12').collapse('show', function(){
e.preventDefault();
location.href = $(this).attr('href');
});
});
body {height:3000px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="row-fluid">
<div class="col-md-9">
<div id="list">
<div class="list-group panel">
<a class="list-group-item list-group-item-default active" data-toggle="collapse" data-parent="#list" id="1" href="#content-1">1 LOREM</a>
<div class="collapse in" id="content-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed blandit luctus sem vitae semper. Aenean lacinia et ante ut ultrices. Aenean mollis nec mi at molestie. Integer vulputate est quis nulla bibendum, at luctus est efficitur. Morbi condimentum sed dui dictum dictum. Phasellus fermentum hendrerit nisl, eget bibendum justo condimentum nec. Pellentesque molestie sem eget mollis semper.
In euismod eu neque vel sollicitudin. Nulla sit amet orci nec tortor interdum finibus. Fusce sit amet metus enim. Duis vitae tempus sapien. Duis vitae sapien vulputate, suscipit ipsum id, molestie lectus. Phasellus a tempor justo. In aliquet tellus vel neque consectetur tincidunt. Phasellus et tempor elit. Nunc fermentum justo finibus urna suscipit, sed tincidunt lectus dignissim. Mauris a dictum dui. Vivamus nec arcu ultricies, pretium nulla sit amet, tincidunt justo.
Aenean vel massa tempus, dapibus nulla eu, accumsan orci. Fusce sit amet nibh lacus. Suspendisse mi enim, ornare in ligula nec, tincidunt accumsan turpis. Nunc nec felis nec lacus varius tempus. Maecenas vel nisi lacus. Quisque consequat malesuada neque, eget posuere lacus pharetra eu. Nullam dui sem, pharetra id leo et, condimentum luctus purus. Sed at malesuada leo, interdum dapibus neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu blandit nisl. Fusce hendrerit eros eu imperdiet lobortis. Sed commodo lectus sit amet sodales venenatis. Aliquam eget tincidunt ex, eget fringilla mi. Vivamus lacinia pellentesque dolor vel viverra. Proin aliquam purus vitae felis congue mollis.
</div>
<a class="list-group-item list-group-item-default active" data-toggle="collapse" data-parent="#list" id="2" href="#content-2">2 LOREM</a>
<div class="collapse" id="content-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed blandit luctus sem vitae semper. Aenean lacinia et ante ut ultrices. Aenean mollis nec mi at molestie. Integer vulputate est quis nulla bibendum, at luctus est efficitur. Morbi condimentum sed dui dictum dictum. Phasellus fermentum hendrerit nisl, eget bibendum justo condimentum nec. Pellentesque molestie sem eget mollis semper.
In euismod eu neque vel sollicitudin. Nulla sit amet orci nec tortor interdum finibus. Fusce sit amet metus enim. Duis vitae tempus sapien. Duis vitae sapien vulputate, suscipit ipsum id, molestie lectus. Phasellus a tempor justo. In aliquet tellus vel neque consectetur tincidunt. Phasellus et tempor elit. Nunc fermentum justo finibus urna suscipit, sed tincidunt lectus dignissim. Mauris a dictum dui. Vivamus nec arcu ultricies, pretium nulla sit amet, tincidunt justo.
Aenean vel massa tempus, dapibus nulla eu, accumsan orci. Fusce sit amet nibh lacus. Suspendisse mi enim, ornare in ligula nec, tincidunt accumsan turpis. Nunc nec felis nec lacus varius tempus. Maecenas vel nisi lacus. Quisque consequat malesuada neque, eget posuere lacus pharetra eu. Nullam dui sem, pharetra id leo et, condimentum luctus purus. Sed at malesuada leo, interdum dapibus neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu blandit nisl. Fusce hendrerit eros eu imperdiet lobortis. Sed commodo lectus sit amet sodales venenatis. Aliquam eget tincidunt ex, eget fringilla mi. Vivamus lacinia pellentesque dolor vel viverra. Proin aliquam purus vitae felis congue mollis.
</div>
<a class="list-group-item list-group-item-default active" data-toggle="collapse" data-parent="#list" id="3" href="#content-3">3 LOREM</a>
<div class="collapse" id="content-3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed blandit luctus sem vitae semper. Aenean lacinia et ante ut ultrices. Aenean mollis nec mi at molestie. Integer vulputate est quis nulla bibendum, at luctus est efficitur. Morbi condimentum sed dui dictum dictum. Phasellus fermentum hendrerit nisl, eget bibendum justo condimentum nec. Pellentesque molestie sem eget mollis semper.
In euismod eu neque vel sollicitudin. Nulla sit amet orci nec tortor interdum finibus. Fusce sit amet metus enim. Duis vitae tempus sapien. Duis vitae sapien vulputate, suscipit ipsum id, molestie lectus. Phasellus a tempor justo. In aliquet tellus vel neque consectetur tincidunt. Phasellus et tempor elit. Nunc fermentum justo finibus urna suscipit, sed tincidunt lectus dignissim. Mauris a dictum dui. Vivamus nec arcu ultricies, pretium nulla sit amet, tincidunt justo.
Aenean vel massa tempus, dapibus nulla eu, accumsan orci. Fusce sit amet nibh lacus. Suspendisse mi enim, ornare in ligula nec, tincidunt accumsan turpis. Nunc nec felis nec lacus varius tempus. Maecenas vel nisi lacus. Quisque consequat malesuada neque, eget posuere lacus pharetra eu. Nullam dui sem, pharetra id leo et, condimentum luctus purus. Sed at malesuada leo, interdum dapibus neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu blandit nisl. Fusce hendrerit eros eu imperdiet lobortis. Sed commodo lectus sit amet sodales venenatis. Aliquam eget tincidunt ex, eget fringilla mi. Vivamus lacinia pellentesque dolor vel viverra. Proin aliquam purus vitae felis congue mollis.
</div>
<a class="list-group-item list-group-item-default active" data-toggle="collapse" data-parent="#list" id="4" href="#content-4">4 LOREM</a>
<div class="collapse" id="content-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed blandit luctus sem vitae semper. Aenean lacinia et ante ut ultrices. Aenean mollis nec mi at molestie. Integer vulputate est quis nulla bibendum, at luctus est efficitur. Morbi condimentum sed dui dictum dictum. Phasellus fermentum hendrerit nisl, eget bibendum justo condimentum nec. Pellentesque molestie sem eget mollis semper.
In euismod eu neque vel sollicitudin. Nulla sit amet orci nec tortor interdum finibus. Fusce sit amet metus enim. Duis vitae tempus sapien. Duis vitae sapien vulputate, suscipit ipsum id, molestie lectus. Phasellus a tempor justo. In aliquet tellus vel neque consectetur tincidunt. Phasellus et tempor elit. Nunc fermentum justo finibus urna suscipit, sed tincidunt lectus dignissim. Mauris a dictum dui. Vivamus nec arcu ultricies, pretium nulla sit amet, tincidunt justo.
Aenean vel massa tempus, dapibus nulla eu, accumsan orci. Fusce sit amet nibh lacus. Suspendisse mi enim, ornare in ligula nec, tincidunt accumsan turpis. Nunc nec felis nec lacus varius tempus. Maecenas vel nisi lacus. Quisque consequat malesuada neque, eget posuere lacus pharetra eu. Nullam dui sem, pharetra id leo et, condimentum luctus purus. Sed at malesuada leo, interdum dapibus neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu blandit nisl. Fusce hendrerit eros eu imperdiet lobortis. Sed commodo lectus sit amet sodales venenatis. Aliquam eget tincidunt ex, eget fringilla mi. Vivamus lacinia pellentesque dolor vel viverra. Proin aliquam purus vitae felis congue mollis.
</div>
<a class="list-group-item list-group-item-default active" data-toggle="collapse" data-parent="#list" id="5" href="#content-5">5 LOREM</a>
<div class="collapse" id="content-5">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed blandit luctus sem vitae semper. Aenean lacinia et ante ut ultrices. Aenean mollis nec mi at molestie. Integer vulputate est quis nulla bibendum, at luctus est efficitur. Morbi condimentum sed dui dictum dictum. Phasellus fermentum hendrerit nisl, eget bibendum justo condimentum nec. Pellentesque molestie sem eget mollis semper.
In euismod eu neque vel sollicitudin. Nulla sit amet orci nec tortor interdum finibus. Fusce sit amet metus enim. Duis vitae tempus sapien. Duis vitae sapien vulputate, suscipit ipsum id, molestie lectus. Phasellus a tempor justo. In aliquet tellus vel neque consectetur tincidunt. Phasellus et tempor elit. Nunc fermentum justo finibus urna suscipit, sed tincidunt lectus dignissim. Mauris a dictum dui. Vivamus nec arcu ultricies, pretium nulla sit amet, tincidunt justo.
Aenean vel massa tempus, dapibus nulla eu, accumsan orci. Fusce sit amet nibh lacus. Suspendisse mi enim, ornare in ligula nec, tincidunt accumsan turpis. Nunc nec felis nec lacus varius tempus. Maecenas vel nisi lacus. Quisque consequat malesuada neque, eget posuere lacus pharetra eu. Nullam dui sem, pharetra id leo et, condimentum luctus purus. Sed at malesuada leo, interdum dapibus neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu blandit nisl. Fusce hendrerit eros eu imperdiet lobortis. Sed commodo lectus sit amet sodales venenatis. Aliquam eget tincidunt ex, eget fringilla mi. Vivamus lacinia pellentesque dolor vel viverra. Proin aliquam purus vitae felis congue mollis.
</div>
<a class="list-group-item list-group-item-default active" data-toggle="collapse" data-parent="#list" id="6" href="#content-6">6 LOREM</a>
<div class="collapse" id="content-6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed blandit luctus sem vitae semper. Aenean lacinia et ante ut ultrices. Aenean mollis nec mi at molestie. Integer vulputate est quis nulla bibendum, at luctus est efficitur. Morbi condimentum sed dui dictum dictum. Phasellus fermentum hendrerit nisl, eget bibendum justo condimentum nec. Pellentesque molestie sem eget mollis semper.
In euismod eu neque vel sollicitudin. Nulla sit amet orci nec tortor interdum finibus. Fusce sit amet metus enim. Duis vitae tempus sapien. Duis vitae sapien vulputate, suscipit ipsum id, molestie lectus. Phasellus a tempor justo. In aliquet tellus vel neque consectetur tincidunt. Phasellus et tempor elit. Nunc fermentum justo finibus urna suscipit, sed tincidunt lectus dignissim. Mauris a dictum dui. Vivamus nec arcu ultricies, pretium nulla sit amet, tincidunt justo.
Aenean vel massa tempus, dapibus nulla eu, accumsan orci. Fusce sit amet nibh lacus. Suspendisse mi enim, ornare in ligula nec, tincidunt accumsan turpis. Nunc nec felis nec lacus varius tempus. Maecenas vel nisi lacus. Quisque consequat malesuada neque, eget posuere lacus pharetra eu. Nullam dui sem, pharetra id leo et, condimentum luctus purus. Sed at malesuada leo, interdum dapibus neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu blandit nisl. Fusce hendrerit eros eu imperdiet lobortis. Sed commodo lectus sit amet sodales venenatis. Aliquam eget tincidunt ex, eget fringilla mi. Vivamus lacinia pellentesque dolor vel viverra. Proin aliquam purus vitae felis congue mollis.
</div>
<a class="list-group-item list-group-item-default active" data-toggle="collapse" data-parent="#list" id="7" href="#content-7">7 LOREM</a>
<div class="collapse" id="content-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed blandit luctus sem vitae semper. Aenean lacinia et ante ut ultrices. Aenean mollis nec mi at molestie. Integer vulputate est quis nulla bibendum, at luctus est efficitur. Morbi condimentum sed dui dictum dictum. Phasellus fermentum hendrerit nisl, eget bibendum justo condimentum nec. Pellentesque molestie sem eget mollis semper.
In euismod eu neque vel sollicitudin. Nulla sit amet orci nec tortor interdum finibus. Fusce sit amet metus enim. Duis vitae tempus sapien. Duis vitae sapien vulputate, suscipit ipsum id, molestie lectus. Phasellus a tempor justo. In aliquet tellus vel neque consectetur tincidunt. Phasellus et tempor elit. Nunc fermentum justo finibus urna suscipit, sed tincidunt lectus dignissim. Mauris a dictum dui. Vivamus nec arcu ultricies, pretium nulla sit amet, tincidunt justo.
Aenean vel massa tempus, dapibus nulla eu, accumsan orci. Fusce sit amet nibh lacus. Suspendisse mi enim, ornare in ligula nec, tincidunt accumsan turpis. Nunc nec felis nec lacus varius tempus. Maecenas vel nisi lacus. Quisque consequat malesuada neque, eget posuere lacus pharetra eu. Nullam dui sem, pharetra id leo et, condimentum luctus purus. Sed at malesuada leo, interdum dapibus neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu blandit nisl. Fusce hendrerit eros eu imperdiet lobortis. Sed commodo lectus sit amet sodales venenatis. Aliquam eget tincidunt ex, eget fringilla mi. Vivamus lacinia pellentesque dolor vel viverra. Proin aliquam purus vitae felis congue mollis.
</div>
<a class="list-group-item list-group-item-default active" data-toggle="collapse" data-parent="#list" id="8" href="#content-8">8 LOREM</a>
<div class="collapse" id="content-8">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed blandit luctus sem vitae semper. Aenean lacinia et ante ut ultrices. Aenean mollis nec mi at molestie. Integer vulputate est quis nulla bibendum, at luctus est efficitur. Morbi condimentum sed dui dictum dictum. Phasellus fermentum hendrerit nisl, eget bibendum justo condimentum nec. Pellentesque molestie sem eget mollis semper.
In euismod eu neque vel sollicitudin. Nulla sit amet orci nec tortor interdum finibus. Fusce sit amet metus enim. Duis vitae tempus sapien. Duis vitae sapien vulputate, suscipit ipsum id, molestie lectus. Phasellus a tempor justo. In aliquet tellus vel neque consectetur tincidunt. Phasellus et tempor elit. Nunc fermentum justo finibus urna suscipit, sed tincidunt lectus dignissim. Mauris a dictum dui. Vivamus nec arcu ultricies, pretium nulla sit amet, tincidunt justo.
Aenean vel massa tempus, dapibus nulla eu, accumsan orci. Fusce sit amet nibh lacus. Suspendisse mi enim, ornare in ligula nec, tincidunt accumsan turpis. Nunc nec felis nec lacus varius tempus. Maecenas vel nisi lacus. Quisque consequat malesuada neque, eget posuere lacus pharetra eu. Nullam dui sem, pharetra id leo et, condimentum luctus purus. Sed at malesuada leo, interdum dapibus neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu blandit nisl. Fusce hendrerit eros eu imperdiet lobortis. Sed commodo lectus sit amet sodales venenatis. Aliquam eget tincidunt ex, eget fringilla mi. Vivamus lacinia pellentesque dolor vel viverra. Proin aliquam purus vitae felis congue mollis.
</div>
<a class="list-group-item list-group-item-default active" data-toggle="collapse" data-parent="#list" id="9" href="#content-9">9 LOREM</a>
<div class="collapse" id="content-9">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed blandit luctus sem vitae semper. Aenean lacinia et ante ut ultrices. Aenean mollis nec mi at molestie. Integer vulputate est quis nulla bibendum, at luctus est efficitur. Morbi condimentum sed dui dictum dictum. Phasellus fermentum hendrerit nisl, eget bibendum justo condimentum nec. Pellentesque molestie sem eget mollis semper.
In euismod eu neque vel sollicitudin. Nulla sit amet orci nec tortor interdum finibus. Fusce sit amet metus enim. Duis vitae tempus sapien. Duis vitae sapien vulputate, suscipit ipsum id, molestie lectus. Phasellus a tempor justo. In aliquet tellus vel neque consectetur tincidunt. Phasellus et tempor elit. Nunc fermentum justo finibus urna suscipit, sed tincidunt lectus dignissim. Mauris a dictum dui. Vivamus nec arcu ultricies, pretium nulla sit amet, tincidunt justo.
Aenean vel massa tempus, dapibus nulla eu, accumsan orci. Fusce sit amet nibh lacus. Suspendisse mi enim, ornare in ligula nec, tincidunt accumsan turpis. Nunc nec felis nec lacus varius tempus. Maecenas vel nisi lacus. Quisque consequat malesuada neque, eget posuere lacus pharetra eu. Nullam dui sem, pharetra id leo et, condimentum luctus purus. Sed at malesuada leo, interdum dapibus neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu blandit nisl. Fusce hendrerit eros eu imperdiet lobortis. Sed commodo lectus sit amet sodales venenatis. Aliquam eget tincidunt ex, eget fringilla mi. Vivamus lacinia pellentesque dolor vel viverra. Proin aliquam purus vitae felis congue mollis.
</div>
<a class="list-group-item list-group-item-default active" data-toggle="collapse" data-parent="#list" id="10" href="#content-10">10 LOREM</a>
<div class="collapse" id="content-10">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed blandit luctus sem vitae semper. Aenean lacinia et ante ut ultrices. Aenean mollis nec mi at molestie. Integer vulputate est quis nulla bibendum, at luctus est efficitur. Morbi condimentum sed dui dictum dictum. Phasellus fermentum hendrerit nisl, eget bibendum justo condimentum nec. Pellentesque molestie sem eget mollis semper.
In euismod eu neque vel sollicitudin. Nulla sit amet orci nec tortor interdum finibus. Fusce sit amet metus enim. Duis vitae tempus sapien. Duis vitae sapien vulputate, suscipit ipsum id, molestie lectus. Phasellus a tempor justo. In aliquet tellus vel neque consectetur tincidunt. Phasellus et tempor elit. Nunc fermentum justo finibus urna suscipit, sed tincidunt lectus dignissim. Mauris a dictum dui. Vivamus nec arcu ultricies, pretium nulla sit amet, tincidunt justo.
Aenean vel massa tempus, dapibus nulla eu, accumsan orci. Fusce sit amet nibh lacus. Suspendisse mi enim, ornare in ligula nec, tincidunt accumsan turpis. Nunc nec felis nec lacus varius tempus. Maecenas vel nisi lacus. Quisque consequat malesuada neque, eget posuere lacus pharetra eu. Nullam dui sem, pharetra id leo et, condimentum luctus purus. Sed at malesuada leo, interdum dapibus neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu blandit nisl. Fusce hendrerit eros eu imperdiet lobortis. Sed commodo lectus sit amet sodales venenatis. Aliquam eget tincidunt ex, eget fringilla mi. Vivamus lacinia pellentesque dolor vel viverra. Proin aliquam purus vitae felis congue mollis.
</div>
<a class="list-group-item list-group-item-default active" data-toggle="collapse" data-parent="#list" id="11" href="#content-11">11 LOREM</a>
<div class="collapse" id="content-11">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed blandit luctus sem vitae semper. Aenean lacinia et ante ut ultrices. Aenean mollis nec mi at molestie. Integer vulputate est quis nulla bibendum, at luctus est efficitur. Morbi condimentum sed dui dictum dictum. Phasellus fermentum hendrerit nisl, eget bibendum justo condimentum nec. Pellentesque molestie sem eget mollis semper.
In euismod eu neque vel sollicitudin. Nulla sit amet orci nec tortor interdum finibus. Fusce sit amet metus enim. Duis vitae tempus sapien. Duis vitae sapien vulputate, suscipit ipsum id, molestie lectus. Phasellus a tempor justo. In aliquet tellus vel neque consectetur tincidunt. Phasellus et tempor elit. Nunc fermentum justo finibus urna suscipit, sed tincidunt lectus dignissim. Mauris a dictum dui. Vivamus nec arcu ultricies, pretium nulla sit amet, tincidunt justo.
Aenean vel massa tempus, dapibus nulla eu, accumsan orci. Fusce sit amet nibh lacus. Suspendisse mi enim, ornare in ligula nec, tincidunt accumsan turpis. Nunc nec felis nec lacus varius tempus. Maecenas vel nisi lacus. Quisque consequat malesuada neque, eget posuere lacus pharetra eu. Nullam dui sem, pharetra id leo et, condimentum luctus purus. Sed at malesuada leo, interdum dapibus neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu blandit nisl. Fusce hendrerit eros eu imperdiet lobortis. Sed commodo lectus sit amet sodales venenatis. Aliquam eget tincidunt ex, eget fringilla mi. Vivamus lacinia pellentesque dolor vel viverra. Proin aliquam purus vitae felis congue mollis.
</div>
<a class="list-group-item list-group-item-default active" data-toggle="collapse" data-parent="#list" id="12" href="#content-12">12 LOREM</a>
<div class="collapse" id="content-12">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed blandit luctus sem vitae semper. Aenean lacinia et ante ut ultrices. Aenean mollis nec mi at molestie. Integer vulputate est quis nulla bibendum, at luctus est efficitur. Morbi condimentum sed dui dictum dictum. Phasellus fermentum hendrerit nisl, eget bibendum justo condimentum nec. Pellentesque molestie sem eget mollis semper.
In euismod eu neque vel sollicitudin. Nulla sit amet orci nec tortor interdum finibus. Fusce sit amet metus enim. Duis vitae tempus sapien. Duis vitae sapien vulputate, suscipit ipsum id, molestie lectus. Phasellus a tempor justo. In aliquet tellus vel neque consectetur tincidunt. Phasellus et tempor elit. Nunc fermentum justo finibus urna suscipit, sed tincidunt lectus dignissim. Mauris a dictum dui. Vivamus nec arcu ultricies, pretium nulla sit amet, tincidunt justo.
Aenean vel massa tempus, dapibus nulla eu, accumsan orci. Fusce sit amet nibh lacus. Suspendisse mi enim, ornare in ligula nec, tincidunt accumsan turpis. Nunc nec felis nec lacus varius tempus. Maecenas vel nisi lacus. Quisque consequat malesuada neque, eget posuere lacus pharetra eu. Nullam dui sem, pharetra id leo et, condimentum luctus purus. Sed at malesuada leo, interdum dapibus neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu blandit nisl. Fusce hendrerit eros eu imperdiet lobortis. Sed commodo lectus sit amet sodales venenatis. Aliquam eget tincidunt ex, eget fringilla mi. Vivamus lacinia pellentesque dolor vel viverra. Proin aliquam purus vitae felis congue mollis.
</div>
</div>
</div>
</div>
<div class="col-md-3">
<ul>
<li><a href="#1">1. Lorem</a></li>
<li><a href="#2">2. Lorem</a></li>
<li><a href="#3">3. Lorem</a></li>
<li><a href="#4">4. Lorem</a></li>
<li><a href="#5">5. Lorem</a></li>
<li><a href="#6">6. Lorem</a></li>
<li><a href="#7">7. Lorem</a></li>
<li><a href="#8">8. Lorem</a></li>
<li><a href="#9">9. Lorem</a></li>
<li><a href="#10">10. Lorem</a></li>
<li><a href="#11">11. Lorem</a></li>
<li><a href="#12">12. Lorem</a></li>
</ul>
</div>
</div>
Upvotes: 0
Views: 78
Reputation: 4288
Answering from the comment.
You can minify all your JS code with just this working piece:
$('ul > li').on('click', function(e){
var n = $(this).index() + 1;
$('#content-' + n).collapse('show', function(){
e.preventDefault();
location.href = $(this).attr('href');
});
});
Upvotes: 1
Reputation: 1027
You have a mess in your code.
$('ul > li:nth-child(1)').click(function(e){
$('div[id*="content-"]:not(#content-1)').collapse('hide');
$('#content-1').collapse('show', function(){
e.preventDefault();
location.href = $(this).attr('href');
});
});
$('ul > li:nth-child(1)') - this point to li, but you want action from a;
$('#content-1') - you search for element with id content-1, which is div, but you use $(this) (which still is div) expecting it has attribute href.
Your href will be proceed by default, if you would click on anchor, but not on li
Upvotes: 0
Reputation: 778
Something like this..
$('ul > li:nth-child(2)').click(function(e){
var _href = $(this).find('a').attr('href');
$('div[id*="content-"]:not(#content-2)').collapse('hide');
$('#content-2').collapse('show', function(e){
e.preventDefault();
location.href = _href;
});
});
Upvotes: 2
Reputation: 393
First, revise all your id which starts with number. Like id="12"
to id="id-12"
.
Then in your <li><a href="#12">12. Lorem</a></li>
.
Change href as href="#id-12"
Upvotes: 0