Semantic UI - Accordion - Not working

Question

Help me please, i have this libs:

 <title>Semantic UI</title> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script scr="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.js"></script> <script scr="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/components/accordion.js"></script>

and this is the html code:

 <div class="ui container"> <div class="ui styled accordion"> <div class="title"> <i class="dropdown icon"></i> Hello </div> <div class="content"> contenido 1 </div> </div> </div>

and js:

 <script> $('.ui.accordion').accordion(); </script>

What am I missing to work fine this element ? Am I need some scripts to add ? I have a browser console error:

TypeError: $('.ui.accordion').accordion is not a function. (In '$('.ui.accordion').accordion()', '$('.ui.accordion').accordion' is undefined)

Answer 1

you're script tags have the typo for the attribute src on your script tag. In your example, its spelled scr , so the page is never actually loading your libraries. So change:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script scr="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.js"></script>
<script scr="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/components/accordion.js"></script>

TO:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/components/accordion.js"></script>

Answer 2

You forgot to put accordion module.

Simple add after semantic.min.js:

<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/components/accordion.js"></script>