Site logo

[Resolved] Accordion doesn´t work

Home Forums Support [Resolved] Accordion doesn´t work

Home Forums Support Accordion doesn´t work

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1922502
    Jaime Hernando

    Hello Elvin, I need your help please I am using this information to create an accordion, it worked fine, but some time later it stopped working on mobiles, I don’t know what happens and how to fix it, I have removed and placed it again, but it does not work.

    I list all the code that I am using that was taken from the forum. # 1194173

    All the Css is in the customizer, since I removed it from the stylesheet to review it.


    CSS

    .accordion-container {
    display: none;
    padding: 20px;
    }
    .accordion-container.toggle-open {
    display: block;
    }
    .accordion-toggle {
    cursor: pointer;
    background-color: #f9f9f9;
    }
    h4.accordion-toggle {
    font-size: 14px;
    padding: 10px 20px;
    margin-top: 10px;
    margin-bottom: 0;
    }

    .accordion-toggle:after {
    content: ‘\002B’;
    color: #777;
    font-weight: bold;
    float: right;
    margin-right: 20px;
    }

    h4.accordion-toggle.toggle-open:after {
    content: “\2212”;
    }

    HTML
    <h4 class=”accordion-toggle”>Add a Heading</h4>

    <p>Insert your contet</p>

    jS a new Element: Hook = wp_footer

    <script type=”text/javascript”>
    jQuery(document).ready(function($) {
    $(‘.accordion-toggle’).click(function(){

    //Expand or collapse this panel
    $(this).next().slideToggle(‘fast’);

    //Hide the other panels
    $(“.accordion-container”).not($(this).next()).slideUp(‘fast’);

    //Switch toggle
    $(‘.accordion-toggle.toggle-open’).not(this).removeClass(‘toggle-open’);
    $(this).toggleClass(‘toggle-open’);
    });
    });
    </script>

    Create a new Snippit

    add_action( ‘wp_enqueue_scripts’, ‘tu_load_jquery’ );
    function tu_load_jquery() {
    wp_enqueue_script( ‘jquery’ );
    }

    Thank you so much.

    #1922507
    Elvin
    Staff
    Customer Support

    Hi there,

    Can you link us to a sample page where the accordion is placed? To check why it isn’t working.

    #1922513
    Jaime Hernando
    #1922550
    Elvin
    Staff
    Customer Support

    The accordion doesn’t work on my end for either desktop or mobile.

    And I see this error – https://share.getcloudapp.com/qGuJxp6P – which is most likely related because you’re using jQuery library.

    On the script, what happens when you replace the word “jQuery” with $?

    Let us know how it goes.

    #1922583
    Jaime Hernando

    Thank you very much; you’ve been very helpful.

    I found the problem and it was solved.

    #1923617
    Elvin
    Staff
    Customer Support

    Nice one. Thanks for letting us know. Glad you got it sorted. 😀

    #2105353
    Ian

    Hi, I’ve been trying to solve the same problem.

    I have added the script to a new code snippet, and it doesn’t seem to read the code.

    For example, I put the script directly into functions.php (I know, strongly not recommended), and I can get the accordion to work. I place the script into code snippet and it doesn’t do anything. How should I set the snippet?

    #2105477
    David
    Staff
    Customer Support

    Hi there,

    can you raise a new topic where you can share a link to your site – we can then take a look to see if there are any obvious issues.

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.