Semantic UI Accordion not working properly

Question

I have an accordion element in my page. The problem is that the accordion appears on the page but it is not clickable. By 'not clickable', I mean that when I click on the header it does not expand to reveal the contents. Nothing happens at all. I hope someone can help.

Thanks in advance.

Answer 1

Your jQuery.js module must be loaded before the semantic-ui accordion.js module.

Simply put

<script src="js/accordion.js"></script>

after

<script src="js/vendor/jquery-1.11.2.min.js"><\/script>

( or whatever your jQuery version is ... )

and initialize the accordion in the html document inside a script tag as :

<script language='javascript'>
             $(document).ready(function(){
                $('.ui.accordion').accordion();
             });
</script>

Answer 2

In my case I had syntax errors inside javascript/jQuery. After fixing that and importing jQuery module before semantic-ui it works. You can open development tools in the browser and check the console for errors in javascript (F12 in Chrome).

    <script type="text/javascript">

$(document).ready(function() {

   window.onload = function(){
       $('.ui.accordion').accordion();

   };
});

</script>

Answer 3

It happens on nested accordions while you script is under $( document ).ready(function() So try to call accordion function in an ajax callback like this;

$('input[name=sampleInput]').on('input', function() {

var val = $("input[name=sampleInput]").val();

if (val.length >= 3)
{
  $.ajax( {
    url: 'sample_handler.php',
    type: 'GET',
    data: {

      data: data

    },
    dataType: 'html',

    success: function ( response ) {

      $('.ui.accordion').accordion({});
     }

   })
  }
})

For instance, I've put accordion function in a callback. So I could use it again and again, even I add nested accordions.