0
votes

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>

jsFiddle

5
What are we supposed to do/see in the fiddle? Also, that fiddle has way to much extraneous stuff; make it an MCVE, and ideally, don't use a fiddle at all, use a Stack Snippet right here on SO. Right now, your question is relying on an external resource (as there's a lot of code missing from the question itself), which isn't how SO works. - T.J. Crowder
You can "minify" your fiddle to this: http://jsfiddle.net/kmsdev/kntcfczz/1/ - kosmos
@T.J.Crowder Thank you! I changed the question. Please tell me if it's okay and sorry for my bad english. - Mustapha Aoussar
@kmsdev please post your comment as answer. Your example is the only one that works for me. Thank you very much! - Mustapha Aoussar
You are welcome. I basically minified your JS code, so I think it works exactly as before, but in a little more efficient way. - kosmos

5 Answers

2
votes

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;
    });
});
1
votes

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');
    });
});

JsFiddle

0
votes

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"

0
votes

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

-1
votes

try like this

window.location.href = someUrl;