Inserting Accordion code into a Jekyll page does not work

Help
1

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.

2

If you share your code we can have a look.

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

3

@jhvanderschee ,

Thankis for responding!

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

<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:
    <!-- 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:

<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.

4

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

  <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>
5

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.

6

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/

7

@rdyar ,

Here is the working accordion .

Here is the non-working test project .

No errors running locally on my console.

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

Thanks!
Phil.

8

based on:

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.

9

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.

10

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

11

@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.

12

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

13

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

Thanks,
Phil.

14

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.

15

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

16

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

.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.