# Inserting Accordion code into a Jekyll page does not work

**URL:** <https://talk.jekyllrb.com/t/inserting-accordion-code-into-a-jekyll-page-does-not-work/3701>\
**Category:** Help\
**Created:** [December 12, 2019, 6:40am UTC](https://talk.jekyllrb.com/t/inserting-accordion-code-into-a-jekyll-page-does-not-work/3701 "2019-12-12T06:40:43Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![philiprhoades](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/philiprhoades/32/1755_2.png) [@philiprhoades](https://talk.jekyllrb.com/u/philiprhoades)\
**Post date:** [December 12, 2019, 6:40am UTC](https://talk.jekyllrb.com/t/inserting-accordion-code-into-a-jekyll-page-does-not-work/3701/1 "2019-12-12T06:40:43Z")

</div>

People,

In isolation as a stand-alone index.html this page

`https://jqueryui.com/accordion/`

is working fine,

However if I insert that code without these lines:

```
<!doctype html>
<html lang="en">
<head>
</head>
<body>
</body>
</html>

```

into an existing Jekyll page that starts with:

```
<!-- Section -->
<section id="phr" class="container content-section text-center">

```

the accordion text shows up fine but the accordion doesn’t work - I presume the parent Jekyll css / js is over-riding the accordion stuff?

Any suggestions about how to get the accordion to work?

Thanks,

Phil.

---

<div class="post-metadata">

**Author:** ![jhvanderschee](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/jhvanderschee/32/583_2.png) [@jhvanderschee](https://talk.jekyllrb.com/u/jhvanderschee)\
**Post date:** [December 12, 2019, 12:09pm UTC](https://talk.jekyllrb.com/t/inserting-accordion-code-into-a-jekyll-page-does-not-work/3701/2 "2019-12-12T12:09:06Z")

</div>

If you share your code we can have a look.

PS. You can also try [https://jekyllcodex.org/without-plugin/accordion/](https://jekyllcodex.org/without-plugin/accordion/), a Jekyll accordion without jQuery, jQuery UI and JS. Just plain CSS in an include.

---

<div class="post-metadata">

**Author:** ![philiprhoades](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/philiprhoades/32/1755_2.png) [@philiprhoades](https://talk.jekyllrb.com/u/philiprhoades)\
**Post date:** [December 12, 2019, 12:29pm UTC](https://talk.jekyllrb.com/t/inserting-accordion-code-into-a-jekyll-page-does-not-work/3701/3 "2019-12-12T12:29:01Z")

</div>

@jhvanderschee ,

Thankis for responding!

Creating a simple Jekyll site from scratch works when adding this code:

```auto
<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Accordion - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#accordion" ).accordion();
  } );
  </script>
</head>
<body>
 
<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>
    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
    </p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>
    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
    </p>
  </div>
  <h3>Section 3</h3>
  <div>
    <p>
    Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
    </p>
    <ul>
      <li>List item one</li>
      <li>List item two</li>
      <li>List item three</li>
    </ul>
  </div>
  <h3>Section 4</h3>
  <div>
    <p>
    Cras dictum. Pellentesque habitant morbi tristique senectus et netus
    </p>
    <p>
    Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
    </p>
  </div>
</div>

```

- but when I insert in a page that was derived from a Gitlab example file that has this in it:

```auto
    <!-- Section -->
    <section id="phr" class="container content-section text-center">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2">

    <!-- accordion stuff inserted here -->

            </div>
        </div>
    </section>

```

the text appears OK but the accordion doesn’t work - I can see from looking at the developer screen that I am getting:

```auto
<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>
    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
    </p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>
    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
    </p>
  </div>
  <h3>Section 3</h3>
  <div>
    <p>
    Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
    </p>
    <ul>
      <li>List item one</li>
      <li>List item two</li>
      <li>List item three</li>
    </ul>
    <p></p>
  </div>
  <h3>Section 4</h3>
  <div>
    <p>
    Cras dictum. Pellentesque habitant morbi tristique senectus et netus
    </p>
    <p>
    Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
    </p>
  </div>
</div>

```

so it is not finding any of the jsquery stuff . .

Thanks,  
Phil.

---

<div class="post-metadata">

**Author:** ![jhvanderschee](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/jhvanderschee/32/583_2.png) [@jhvanderschee](https://talk.jekyllrb.com/u/jhvanderschee)\
**Post date:** [December 12, 2019, 1:35pm UTC](https://talk.jekyllrb.com/t/inserting-accordion-code-into-a-jekyll-page-does-not-work/3701/4 "2019-12-12T13:35:04Z")

</div>

Where did you put the jsquery stuff 😉 ? I mean: did you put these tags in your head?

```auto
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#accordion" ).accordion();
  } );
  </script>

```

---

<div class="post-metadata">

**Author:** ![philiprhoades](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/philiprhoades/32/1755_2.png) [@philiprhoades](https://talk.jekyllrb.com/u/philiprhoades)\
**Post date:** [December 12, 2019, 1:47pm UTC](https://talk.jekyllrb.com/t/inserting-accordion-code-into-a-jekyll-page-does-not-work/3701/5 "2019-12-12T13:47:50Z")

</div>

I tried that - didn’t work so I also tried leaving it all together with the accordion HTML lines - no success with either . .

Thanks,  
Phil.

---

<div class="post-metadata">

**Author:** ![rdyar](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/rdyar/32/710_2.png) [@rdyar](https://talk.jekyllrb.com/u/rdyar)\
**Post date:** [December 12, 2019, 5:18pm UTC](https://talk.jekyllrb.com/t/inserting-accordion-code-into-a-jekyll-page-does-not-work/3701/6 "2019-12-12T17:18:09Z")

</div>

do you have a link to your example?

when inspecting the page in chrome did you look at the console for errors? I’m guessing the JS is not loading.

here is a link to a non jquery example I did:  
[https://rdyar.github.io/collapsible-panels/](https://rdyar.github.io/collapsible-panels/)

---

<div class="post-metadata">

**Author:** ![philiprhoades](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/philiprhoades/32/1755_2.png) [@philiprhoades](https://talk.jekyllrb.com/u/philiprhoades)\
**Post date:** [December 12, 2019, 10:59pm UTC](https://talk.jekyllrb.com/t/inserting-accordion-code-into-a-jekyll-page-does-not-work/3701/7 "2019-12-12T22:59:29Z")

</div>

@rdyar ,

> [@rdyar](#):
>
> do you have a link to your example?

Here is the working [accordion](https://philip_rhoades.gitlab.io/accordion) .

Here is the non-working [test project](https://philip_rhoades.gitlab.io/txr-x) .

No errors running locally on my console.

I will have a look at your link while I am travelling today.

Thanks!  
Phil.

---

<div class="post-metadata">

**Author:** ![rdyar](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/rdyar/32/710_2.png) [@rdyar](https://talk.jekyllrb.com/u/rdyar)\
**Post date:** [December 13, 2019, 12:55am UTC](https://talk.jekyllrb.com/t/inserting-accordion-code-into-a-jekyll-page-does-not-work/3701/8 "2019-12-13T00:55:34Z")

</div>

based on:

> <https://stackoverflow.com/questions/14898071/jquery-ui-typeerror-accordion-is-not-a-function/23444623#23444623>

I think it is because you are loading jquery in the head and also in the footer and it is getting confused.

If you look at the Chrome Inspector console you are getting the same error that the SO question is about.

---

<div class="post-metadata">

**Author:** ![jhvanderschee](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/jhvanderschee/32/583_2.png) [@jhvanderschee](https://talk.jekyllrb.com/u/jhvanderschee)\
**Post date:** [December 13, 2019, 1:46pm UTC](https://talk.jekyllrb.com/t/inserting-accordion-code-into-a-jekyll-page-does-not-work/3701/9 "2019-12-13T13:46:49Z")

</div>

> [@philiprhoades](#):
>
> No errors running locally on my console.

You have no Jekyll errors, but you have 4 javascript errors (also locally). You can find these errors in the console part of your browser.

---

<div class="post-metadata">

**Author:** ![TerminalAddict](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/terminaladdict/32/1300_2.png) [@TerminalAddict](https://talk.jekyllrb.com/u/TerminalAddict)\
**Post date:** [December 16, 2019, 2:51am UTC](https://talk.jekyllrb.com/t/inserting-accordion-code-into-a-jekyll-page-does-not-work/3701/10 "2019-12-16T02:51:30Z")

</div>

Not caused by Jekyll.  
You’re doing something with jquery that is causing the error.

Working example (built entirely with Jekyll) The archives section in the side bar

> **[The life and times of Paul Willard](https://www.loudas.com/)**
>
> Just another internet addict

---

<div class="post-metadata">

**Author:** ![philiprhoades](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/philiprhoades/32/1755_2.png) [@philiprhoades](https://talk.jekyllrb.com/u/philiprhoades)\
**Post date:** [December 17, 2019, 3:16am UTC](https://talk.jekyllrb.com/t/inserting-accordion-code-into-a-jekyll-page-does-not-work/3701/11 "2019-12-17T03:16:16Z")

</div>

@rdyar , @jhvanderschee ,

Thanks, I will have a closer look at this when I back home from travelling tonight.

@TerminalAddict ,

There are a lot of archive years to go through - do you have a link?

Thanks,  
Phil.

---

<div class="post-metadata">

**Author:** ![TerminalAddict](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/terminaladdict/32/1300_2.png) [@TerminalAddict](https://talk.jekyllrb.com/u/TerminalAddict)\
**Post date:** [December 17, 2019, 3:28am UTC](https://talk.jekyllrb.com/t/inserting-accordion-code-into-a-jekyll-page-does-not-work/3701/12 "2019-12-17T03:28:35Z")

</div>

@philiprhoades no I mean the actually archives section of the main page uses jquery accordion (view source etc etc)

---

<div class="post-metadata">

**Author:** ![philiprhoades](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/philiprhoades/32/1755_2.png) [@philiprhoades](https://talk.jekyllrb.com/u/philiprhoades)\
**Post date:** [December 17, 2019, 4:32am UTC](https://talk.jekyllrb.com/t/inserting-accordion-code-into-a-jekyll-page-does-not-work/3701/13 "2019-12-17T04:32:25Z")

</div>

> [@TerminalAddict](#):
>
> I mean the actually archives section of the main page uses jquery accordion (view source etc etc)

Ah . . right . . will have a closer look . .

Thanks,  
Phil.

---

<div class="post-metadata">

**Author:** ![philiprhoades](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/philiprhoades/32/1755_2.png) [@philiprhoades](https://talk.jekyllrb.com/u/philiprhoades)\
**Post date:** [December 18, 2019, 5:07pm UTC](https://talk.jekyllrb.com/t/inserting-accordion-code-into-a-jekyll-page-does-not-work/3701/14 "2019-12-18T17:07:15Z")

</div>

People,

I finally fixed the problem by commenting out this line:

```
<script src="{{ "/js/jquery.js" | prepend: site.baseurl }}"></script>

```

in:

```
 _include/js.html

```

So, the next question now is - how do I permanently change the style colours for the accordion here:

```
https://philip_rhoades.gitlab.io/txr-x/#phr

```

- I know I can do it temporarily from the Dev - Styles I/F but I can’t see how to do it from the code - I am guessing that I have to add some CSS stuff that inherits and modifies some linked stuff?

Thanks,  
Phil.

---

<div class="post-metadata">

**Author:** ![TerminalAddict](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/terminaladdict/32/1300_2.png) [@TerminalAddict](https://talk.jekyllrb.com/u/TerminalAddict)\
**Post date:** [December 19, 2019, 8:01pm UTC](https://talk.jekyllrb.com/t/inserting-accordion-code-into-a-jekyll-page-does-not-work/3701/15 "2019-12-19T20:01:44Z")

</div>

well I’d put them in my assets/css/custom.scss  
on my site, I’d write css for the id #accordion or class .archivesAccordian

yours, I’d probabyl target #accordion.  
or .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover

that’s the h3 of your accordion

---

<div class="post-metadata">

**Author:** ![philiprhoades](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/philiprhoades/32/1755_2.png) [@philiprhoades](https://talk.jekyllrb.com/u/philiprhoades)\
**Post date:** [December 20, 2019, 12:52am UTC](https://talk.jekyllrb.com/t/inserting-accordion-code-into-a-jekyll-page-does-not-work/3701/16 "2019-12-20T00:52:19Z")

</div>

Hmm . . in assets/css/custom.css I now have:

```auto
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
    border: 1px solid #333333;
    background: #333333;
    font-weight: normal;                                                                                             
    color: #ffffff;
}   
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
    border: 1px solid #c5c5c5;
    background: #333333;
    font-weight: normal;
    color: #454545;
}   

```

and I can see that when I changed any of the colour codes, the active Jekyll server did a rebuild - but when I refresh Chrome nothing changes and in the Dev window,I still see the original values . . I must still be missing something . .

UPDATE:  
I moved and edited files to be consistent with the way this Jekyll theme was set up and then added “h3” to the beginning of the “.ui. . .” lines above and then colour changes worked!

Thanks,  
Phil.