Support » Fixing WordPress » Animated accordian doesn’t work

  • Hi everyone

    I am unable to use the animated accordian when I enter the following code to my Edit page box in the WordPress dashboard. Can someone please give me a hint so I can reoslve this issue? Thank you very much. Please note I am new to programming.

    http://imgur.com/yPKAdqA

    Desired Result

    • This topic was modified 6 years, 7 months ago by beachsand14.
    • This topic was modified 6 years, 7 months ago by Jan Dembowski.
Viewing 4 replies - 1 through 4 (of 4 total)
  • Please review forum guidelines before posting, https://wordpress.org/support/guidelines/

    You did not provide any information that would allow anyone to investigate your issue.

    In addition, WordPress itself does not include any code for an animated accordion so if it is a plugin, go to the plugin author for support. If it is part of your theme visit the themes support page for support.

    Thread Starter beachsand14

    (@beachsand14)

    Hi, @jaycbrf sorry about that. Here are steps to reproduce the issue. Any help is appreciated. I signed up for w3school forum but it takes time to approve my account. Thanks again

    1. Go to WordPress Dashboard
    2. Click Pages.
    3. Paste the following code into text editor.
    4. Click Update.
    5. Go to the updated page and click on any of the buttons.

    Result: Javascript accordian does not work and is expanded by default

    • This reply was modified 6 years, 7 months ago by beachsand14.
    • This reply was modified 6 years, 7 months ago by beachsand14.
    Thread Starter beachsand14

    (@beachsand14)

    I tried another accordian script and it doesn’t work in my WordPress text editor.

    <!-- JS -->
    <script type="text/javascript">
      $(document).ready(function($) {
        $('#accordion').find('.accordion-toggle').click(function(){
    
          //Expand or collapse this panel
          $(this).next().slideToggle('fast');
    
          //Hide the other panels
          $(".accordion-content").not($(this).next()).slideUp('fast');
    
        });
      });
    </script>
    
    <!-- CSS -->
    <style>
      .accordion-toggle {cursor: pointer;}
      .accordion-content {display: none;}
      .accordion-content.default {display: block;}
    </style>
    
    <!-- HTML -->
    <div id="accordion">
      <h4 class="accordion-toggle">Accordion 1</h4>
      <div class="accordion-content default">
        <p>Cras malesuada ultrices augue molestie risus.</p>
      </div>
      <h4 class="accordion-toggle">Accordion 2</h4>
      <div class="accordion-content">
        <p>Lorem ipsum dolor sit amet mauris eu turpis.</p>
      </div>
      <h4 class="accordion-toggle">Accordion 3</h4>
      <div class="accordion-content">
        <p>Vivamus facilisisnibh scelerisque laoreet.</p>
      </div>
    </div>

    http://uniondesign.ca/simple-accordion-without-jquery-ui/

    You can not just paste code on a page and expect it to work. The text editor does not accept Javascript or CSS.

    The example you provided is for developers or HTML web sites. If you don’t know what you are doing use a plugin.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Animated accordian doesn’t work’ is closed to new replies.