1

So I'm adding a accordion to clean/beautify our team's SharePoint site. I had it functioning, then today I was modifying another part of the page and the accordion suddenly stopped working. I reverted to an earlier version, as well as deleting the web parts and re-adding them. The accordion is just sat open.

The following jQuery code is in a Script Web Part on our homepage (these are all in web parts as I have had difficulties linking the jQuery and CSS files to the html so any suggestions on that would also be helpful):

$(document).ready(function() {
function close_accordion_section() {
    $('.accordion .accordion-section-title').removeClass('active');

$('.accordion .accordion-section-content').slideUp(300).removeClass('open');          
 }

 $('.accordion-section-title').click(function(e) {
    // Grab current anchor value
    var currentAttrValue = $(this).attr('href');

    if($(e.target).is('.active')) {
        close_accordion_section();
    }else {
        close_accordion_section();

        // Add active class to section title
        $(this).addClass('active');
        // Open up the hidden content panel
        $('.accordion ' + currentAttrValue).slideDown(300).addClass('open'); 
    }

    e.preventDefault();
});
});

For brevity of the post I will include the link in which I found the above code which includes the same HTML and CSS I am using: Accordion

Edit: The two errors I received:

Uncaught ReferenceError: $ is not defined
Uncaught SyntaxError: Unexpected token &
  • If you open developer tools in your browser (F12) what is the error you get when you try load the page/try to use the accordion? – Jordan Jun 15 '16 at 19:30
  • Try and add this to the top of your HTML: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> – Jordan Jun 15 '16 at 19:42
0

Try putting this into your script editor web part or place it all in a .txt file and reference to it using a content editor web part (I find this way easier to work with). You'll have to modify the HTML to whatever parts you are using.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    function close_accordion_section() {
        $('.accordion .accordion-section-title').removeClass('active');
        $('.accordion .accordion-section-content').slideUp(300).removeClass('open');
    }

    $('.accordion-section-title').click(function(e) {
        // Grab current anchor value
        var currentAttrValue = $(this).attr('href');

        if($(e.target).is('.active')) {
            close_accordion_section();
        }else {
            close_accordion_section();

            // Add active class to section title
            $(this).addClass('active');
            // Open up the hidden content panel
            $('.accordion ' + currentAttrValue).slideDown(300).addClass('open'); 
        }

        e.preventDefault();
    });
}); 
</script>

<style>
/*----- Accordion -----*/
.accordion, .accordion * {
    -webkit-box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    box-sizing:border-box;
}

.accordion {
    overflow:hidden;
    box-shadow:0px 1px 3px rgba(0,0,0,0.25);
    border-radius:3px;
    background:#f7f7f7;
}

/*----- Section Titles -----*/
.accordion-section-title {
    width:100%;
    padding:15px;
    display:inline-block;
    border-bottom:1px solid #1a1a1a;
    background:#333;
    transition:all linear 0.15s;
    /* Type */
    font-size:1.200em;
    text-shadow:0px 1px 0px #1a1a1a;
    color:#fff;
}

.accordion-section-title.active, .accordion-section-title:hover {
    background:#4c4c4c;
    /* Type */
    text-decoration:none;
}

.accordion-section:last-child .accordion-section-title {
    border-bottom:none;
}

/*----- Section Content -----*/
.accordion-section-content {
    padding:15px;
    display:none;
}
</style>

<div class="accordion">
    <div class="accordion-section">
        <a class="accordion-section-title" href="#accordion-1">Accordion Section #1</a>

        <div id="accordion-1" class="accordion-section-content">
            <p>Mauris interdum fringilla augue vitae tincidunt. Curabitur vitae tortor id eros euismod ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent nulla mi, rutrum ut feugiat at, vestibulum ut neque? Cras tincidunt enim vel aliquet facilisis. Duis congue ullamcorper vehicula. Proin nunc lacus, semper sit amet elit sit amet, aliquet pulvinar erat. Nunc pretium quis sapien eu rhoncus. Suspendisse ornare gravida mi, et placerat tellus tempor vitae.</p>
        </div><!--end .accordion-section-content-->
    </div><!--end .accordion-section-->
</div><!--end .accordion-->

EDIT:

If you need to add in more sections for your accordion, it would look something like this (this will give you three sections).

<div class="accordion">
    <div class="accordion-section">
        <a class="accordion-section-title" href="#accordion-1">Accordion Section #1</a>      
        <div id="accordion-1" class="accordion-section-content">
            <p>Mauris interdum fringilla augue vitae tincidunt. Curabitur vitae tortor id eros euismod ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent nulla mi, rutrum ut feugiat at, vestibulum ut neque? Cras tincidunt enim vel aliquet facilisis. Duis congue ullamcorper vehicula. Proin nunc lacus, semper sit amet elit sit amet, aliquet pulvinar erat. Nunc pretium quis sapien eu rhoncus. Suspendisse ornare gravida mi, et placerat tellus tempor vitae.</p>
        </div><!--end .accordion-section-content-->
    </div><!--end .accordion-section-->

    <div class="accordion-section">
        <a class="accordion-section-title" href="#accordion-2">Accordion Section #2</a>          
        <div id="accordion-2" class="accordion-section-content">
            <p>Mauris interdum fringilla augue vitae tincidunt. Curabitur vitae tortor id eros euismod ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent nulla mi, rutrum ut feugiat at, vestibulum ut neque? Cras tincidunt enim vel aliquet facilisis. Duis congue ullamcorper vehicula. Proin nunc lacus, semper sit amet elit sit amet, aliquet pulvinar erat. Nunc pretium quis sapien eu rhoncus. Suspendisse ornare gravida mi, et placerat tellus tempor vitae.</p>
        </div><!--end .accordion-section-content-->
    </div><!--end .accordion-section-->

    <div class="accordion-section">
        <a class="accordion-section-title" href="#accordion-3">Accordion Section #3</a>
        <div id="accordion-3" class="accordion-section-content">
            <p>Mauris interdum fringilla augue vitae tincidunt. Curabitur vitae tortor id eros euismod ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent nulla mi, rutrum ut feugiat at, vestibulum ut neque? Cras tincidunt enim vel aliquet facilisis. Duis congue ullamcorper vehicula. Proin nunc lacus, semper sit amet elit sit amet, aliquet pulvinar erat. Nunc pretium quis sapien eu rhoncus. Suspendisse ornare gravida mi, et placerat tellus tempor vitae.</p>
        </div><!--end .accordion-section-content-->
    </div><!--end .accordion-section-->
</div><!--end .accordion-->
  • This worked perfectly, thank you! Could you explain to me exactly why it worked though for my own understanding? – Tokioi Jun 15 '16 at 20:30
  • 1
    The error $ is not defined generally means that you don't have jQuery referenced on your page. I added the very top line to make sure it is pulling in a reference before it tries to execute the rest of the your code. – Jordan Jun 15 '16 at 20:33
  • 1
    Adding on to what Jordan said, all sorts of weirdness can ensure too if you've referenced Jquery twice (especially different versions). Check every <script> tag. – tekiegreg Jun 15 '16 at 21:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.