Update: I have identified the issue, but I am unsure how to resolve it. The problem seems to be with semant.js and jquery.ui.js
Error: http://jsfiddle.net/taioli/tg21uLoh/12/
Resolution (without jquery.ui) http://jsfiddle.net/taioli/tg21uLoh/11/
I am struggling to comprehend this issue. I have an accordion inside a modal that is not functioning properly. Initially, I suspected a CSS conflict, however, after conducting some tests, I confirmed there is no CSS conflict.
Modal
<div class="ui modal history">
<i class="close icon"></i>
<div class="header">
Profile Picture
</div>
<div class="content">
<div class="ui accordion">
<div class="title">
<i class="dropdown icon"></i>
What is a dog?
</div>
<div class="content">
<p class="transition ">A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p>
</div>
<div class="title">
<i class="dropdown icon"></i>
What kinds of dogs are there?
</div>
<div class="content">
<p class="transition hidden">There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog that they find to be compatible with their own lifestyle and desires from a companion.</p>
</div>
<div class="title ">
<i class="dropdown icon"></i>
How do you acquire a dog?
</div>
<div class="content ">
<p class="transition ">Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.</p>
<p class="transition ">A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog who may not find one so readily.</p>
</div>
</div>
</div>
<div class="actions">
<div class="ui black deny button">
Nope
</div>
<div class="ui positive right labeled icon button">
Yep, that's me
<i class="checkmark icon"></i>
</div>
</div>
</div>
Javascript
Within document ready
$('.ui.accordion').accordion();
$('.ui.modal.history').modal('show');
I tested this on a jsfiddle and it worked perfectly. However, on my webpage, I encountered this issue: https://i.sstatic.net/Lq3Py.png
The first item is not functioning correctly.
It is especially peculiar that in an identical jsfiddle, everything functions as intended.