Integrate Toggle block in form

HI @mlchrt

I’m not quite sure what exactly do you want to achieve but if it’s only about showing/hiding information then yes – it’s doable without any additional tools:

1. add a checkbox or radio field to the form
2. add a html field to the form
3. put your information in that html field
4. and set its “visibility” rules to be based on the status of that checkbox or radio field.

Here is more about visibility conditions:

https://wpmudev.com/docs/wpmu-dev-plugins/forminator/#Forminator-Conditional-Logic

I’ve also created a basic example for you so you could see exactly what I mean. You’ll find export code here so you can import it to some test site and check:

https://pastebin.com/pcJijCjx

Best regards,
Adam

Hi there,

thanks for the quick reply!! I meant without using the form elements. So just for an information section (no checkboxes / radios). Just a bar which i can embed via the HTML element or something else. Just to show information in a section with a drop down.

I can’t just embed code in the HTML box as it get’s parsed and is not fully functional. How can i achieve a simple hidden text which is visibile when clicking on a button or something.

Thanks!

Hi @mlchrt

Thank you for response!

The solution that I shared is the simplest one and you could also add some custom CSS styling to it to make those fields look a bit more like such “expandable bar”.

But if you want to do this without additional form fields (like checkbox or similar) it will be more complex. There’s no such built-in feature and you cannot put some JS or similar complex code directly in HTML to make embed some “expandable content” in it.

You’d need to use some additional JS to show/hide HTML field itself, while still putting your information in that HTML field.

I’ve asked our developers for assistance with it so they’ll check if that’d be doable and we’ll let you know if yes but I’d appreciate some additional patience as their response time may be longer than ours.

Best regards,
Adam

Hi @mlchrt

I got response form our developers and we have two possible solutions for you.

1. If you use some 3rd-party accordion plugin/module

Assuming it can be added using shortcode (note: only shortcode, not any custom HTML/JS code but just shortcode), you can add this line to your child-theme’s functions.php file

add_filter( 'forminator_replace_variables', 'do_shortcode' );

and then you can add your shortcode to the “HTML” filed of the form and it should work in most cases.

2. If you need fully custom solution

This is quite a bit more complex but still doable with additional custom code.

First, you would need to below code to the site as MU plugin.

<?php 

add_shortcode( 'accordion_html', 'wpmudev_accrodion_html' );
function wpmudev_accrodion_html() {
    ob_start();
    ?>
    <style>
    .accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
    }

    .active, .accordion:hover {
    background-color: #ccc; 
    }

    .panel {
    padding: 0 18px;
    display: none;
    background-color: white;
    overflow: hidden;
    }
    </style>
    <script>
    var acc = document.getElementsByClassName("accordion");
    var i;

    for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.display === "block") {
        panel.style.display = "none";
        } else {
        panel.style.display = "block";
        }
    });
    }
    </script>
    <div class="accordion">Section 1</div>
    <div class="panel">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

    <div class="accordion">Section 2</div>
    <div class="panel">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

    <div class="accordion">Section 3</div>
    <div class="panel">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <?php
    return ob_get_clean();
}
add_filter( 'forminator_replace_variables', 'do_shortcode' );

To add it as MU plugin:

– create an empty file with a .php extension (e.g. “forminator-html-accordion-shortcode.php”) in the “/wp-content/mu-plugins” folder in your site’s WordPress install on the server

– copy above code and paste it into that file

– in this part of the code you need to create your HTML for the accordion tabs

<div class="accordion">Section 1</div>
    <div class="panel">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

    <div class="accordion">Section 2</div>
    <div class="panel">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

    <div class="accordion">Section 3</div>
    <div class="panel">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

Note that you need to follow this structure but if you already tried to create HTML tabs earlier, I believe you already get the idea how it goes;

– save the file

Second, you need to add this shortcode into the HTML field on the form

[accordion_html]

Note please: since it’s all custom solution, this is as far as we can go with this. One of the three methods shared throughout this topic should do the trick for you but if not, I’m afraid we can’t provide any more customization.

Kind regards,
Adam

Hi @mlchrt,

Since we haven’t heard from you for a while. I’ll mark this thread as resolved for now. Please feel free to re-open this thread if you need any further assistance.

Kind Regards
Nithin