CODEWITHSUNDEEP
cssaccordionsemantic-ui
Francesco Taioli
Francesco Taioli

Reputation: 2856

Semantic ui accordion into modal

EDIT: found problem, but no know how to fix. There is a problem with semant.js and jquery.ui.js

error: http://jsfiddle.net/taioli/tg21uLoh/12/

correct(without jquery.ui) http://jsfiddle.net/taioli/tg21uLoh/11/

i don't understant this problem. i have an accordion into a modal that doesn't work. First of all i thought that there is a css conflict, but, after some evidence that I did, there isn't 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>

js

in document ready

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

$('.ui.modal.history').modal('show');

i try this in a jsfiddle and it's work. In my page i have this enter image description here

the first item actually doesn't work.

The strangest thing is that in a identically jsfiddle it's work

Upvotes: 0

Views: 722

Answers (1)

Cyril Beeckman
Cyril Beeckman

Reputation: 1278

Semantic.js and jQuery-ui.js have the same function 'Accordion'

Just take a look at https://jqueryui.com/download/

Create your own customized jquery-ui library and don't check the component accordion.

It will probably solve your bug.

Upvotes: 1

Related Questions