Said to be a great accordion: https://github.com/oncode/handorgel

Any way I cannot make it work...

<link rel="stylesheet" href="https://unpkg.com/handorgel@0.4.2/lib/css/handorgel.css">
<script src="https://unpkg.com/handorgel@0.4.2/lib/js/umd/handorgel.js"></script>

and the markup as in the example:

<div style="color: black" class="handorgel">
    <h3 class="handorgel__header">
        <button class="handorgel__header__button">
      Title
    </button>
    </h3>
    <div class="handorgel__content" data-open>
        <div class="handorgel__content__inner">
            Content openened by default
        </div>
    </div>
    <h3 class="handorgel__header">
        <button class="handorgel__header__button">
      Title 2
    </button>
    </h3>
    <div class="handorgel__content">
        <div class="handorgel__content__inner">
            Content closed by default
        </div>
    </div>

    ...

</div>

var accordion = new handorgel(document.querySelector('.handorgel'), {

    // whether multiple folds can be opened at once
    multiSelectable: true,
    // whether the folds are collapsible
    collapsible: true,

    // header/content class if fold is open
    headerOpenClass: 'handorgel__header--open',
    contentOpenClass: 'handorgel__content--open',

    // header/content class if fold has been opened (transition finished)
    headerOpenedClass: 'handorgel__header--opened',
    contentOpenedClass: 'handorgel__content--opened',

    // header/content class if fold has been focused
    headerFocusClass: 'handorgel__header--focus',
    contentFocusClass: 'handorgel__content--focus',

    // header/content class if fold is disabled
    headerDisabledClass: 'handorgel__header--disabled',
    contentDisabledClass: 'handorgel__content--disabled',

    // header/content class if no transition should be active (applied on resize)
    headerNoTransitionClass: 'handorgel__header--notransition',
    contentNoTransitionClass: 'handorgel__content--notransition'

})

Uncaught ReferenceError: handorgel is not defined at js.js:1 - a mistake I obtain. What am I doing wrong?

upvote
  flag
You not call or install this plugin new handorgel(document.querySelector('.handorgel'), {.. – Pedram
1 upvote
  flag
@pedram looking at the error... He does, like it seems. But he might be calling his js.js-file before including the handorgel.js – Machigatta
upvote
  flag
@Machigatta I didn't see that. yes probably. – Pedram
upvote
  flag
@Machigatta just updated question with my js code – lesha_ber
1 upvote
  flag
@Machigatta You were right! Many thanks! Order plays it's role :) – lesha_ber
upvote
  flag
Did you render your code inside <body> tag ? if yes, where is the <script> tag? – Pedram
upvote
  flag
@pedram sure! now everything is fine! thanks! – lesha_ber

1 Answers 11

Try to attach your own .js before handorgel.js otherwise it will not work :)

upvote
  flag
other way around... first handorgel.js -> then your own – Machigatta

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