CODEWITHSUNDEEP
jqueryhtmlaccordion
Dmitri
Dmitri

Reputation: 579

jQuery UI Accordion - animation does not work

Thanks for your help in advance.

I am using the jQuery UI accordion and I would like there to be an animation but for some reason it does not work. Any idea why? the accordion div simply appears and disappears. Here is my code:

      <!-- creates  accordion where records can be entered -->
                    <script type="text/javascript">

        $(document).ready(function(){

            $( "#tracking-record-menu" ).accordion({
                collapsible: true,
                    header: '.record-item',
                active: false,
                animated: 'slide'
            });

                            });

                    </script>    

          <!--######### contains tracking record buttons ######## -->
               <div id="tracking-record-container"> 
          <ul id="tracking-record-menu">

<li class="record-section"><span class="record-section-text">Body Metrics</span></li>

<li class="record-item"><div class="record-item-div"><span class="record-text">Distance</span></div></li>

                     <div class="tooltip-record">
                     <form id="distance_graphtracker" method="post" action="">
                     <label for="distance-log-id">Distance</label>
         <input type="text" name="distance_log" id="distance-log-id" />
                     <button type="submit" name="submit_distance" >Record</button>
                     </form>
                     </div>

<li class="record-item"><div class="record-item-div"><span class="record-text">Time</span></div></li>

                     <div class="tooltip-record">
                     <form id="time_graphtracker" method="post" action="">
                     <label for="time-log-id">Time</label>
          <input type="text" name="time_log" id="time-log-id" />
                     <button type="submit" name="submit_time" >Record</button>
                     </form>
                     </div>

</ul>
</div>

P.S. I have included the UI Effects Core.

Upvotes: 1

Views: 1727

Answers (2)

Serhii Halchenko
Serhii Halchenko

Reputation: 722

Your animation can be broken if you use css like:

.accordion_item_content { height: auto !important; }

Because in that case that element cannot be animated (you override all changes). In that case you should use option autoHeight: true in accordion.

Upvotes: 1

Lowkase
Lowkase

Reputation: 5699

I made a fiddle using your code but the slide effect looks like it is firing correctly: http://jsfiddle.net/Xzjum/

Can you include your CSS, maybe there is something effecting the slide animation?

Upvotes: 0

Related Questions