Toggle button doesn’t stay under content

Hi Shawn,

you are right, the revealed text (field CONTENT 2) is positioned beneath the toggle button and there is no setting to change this. You can try to change the order by adding the following into the field CSS in the Advanced tab of the element, though:

css
.el-element {
    display: grid;
}
.el-element > div:nth-child(2) {
    order: 3;
}

Alternatively, you can leave the content fields empty and use separate elements which are both positioned above the button and toggle one of these or all with the toggle element. Give the elements you want to toggle a class, e. g. my-class, and set the same class in the settings of the toggle element in the field CLS. See Demo 2 on the demo page for an example.

Kind regards
Thomas

Ok. Thanks! I was looking at your demo page and that was the way I wanted it to work. The first way with the CSS works, but I will try the other way and see which I like better. Thanks again.

Sorry, am trying to get this to work like your demo. I am trying to show 1 paragraph on load and toggle one paragraph. Am I going to have 3 elements? The one I want hidden and toggle will have the class I put in the Toggle settings? If I leave both content fields blank, the button doesn’t appear. I am sure I am just missing something.

Please update to the latest version of the plugin which is 1.6.1. It has just been released yesterday. It fixes an issue where the render condition was too strict. Do you still experience the issue (button not displayed) after the update?

Ahh, I had just downloaded and installed it. But now I see the update there. The button does appear now.

So if I put .show-bio on the text element I want hidden at first, is both the Target and CLS .show-bio. Or is the Target something different?

Ok. I figured it out. Whew! Thanks again.

I thought… Now it is doing opposite of what I want. It is showing the part I want hidden first and then toggles to hidden.

https://putnamparks.org/friends/

You set Target to .show-bio and leave CLS empty.

Target is the CSS selector to target the elements you want to toggle, in this case all elements with the class show-bio. CLS is the class that shall be toggled and defaults to the hidden attribute if left empty. As you don’t want to add/remove a class, but toggle the visibility, you can leave it empty.

Then edit the text element you want to appear after the button has been clicked. Go to the Advanced tab and into the field Class enter show-bio and into the field Attributes enter hidden. This means that this element is initially hidden. The attribute will then be removed when you click on the toggle button. If you have multiple toggles, use a different class each time if you don’t want to show all texts at once.

Maybe also take a look at the documentation on the toggle component: https://getuikit.com/docs/toggle

I missed Attribute part. Many thanks for taking time to help me.

I’m just curious …

Is there a reason why you can’t just reorder the code in the template.php file for hd-toggle so the button would always be below content2? Or is it more common to keep the button above the content2 section and I am just weird?

<?php if ($props['content']) : ?>
        <div class="uk-margin"><?php echo $props['content'] ?></div>
    <?php endif ?>
    <?php if ($props['content2']) : ?>
        <div <?php echo ($uniqid != '') ? 'id="' . $uniqid . '"' : '' ?> class="uk-margin" <?php echo $ishidden; ?>><?php echo $props['content2'] ?></div>
    <?php endif ?>

<!-- I moved this below the code block above and added a class -->
    <div class="uk-margin rmore">

        <?php echo $button($props) ?>

            <?php if ($props['icon'] && $props['icon_align'] == 'left') : ?>
            <?php echo $icon($props, '') ?>
            <?php endif ?>

            <?php if ($props['btn_label']) : ?>
            <?php echo $props['btn_label'] ?>
            <?php endif ?>

            <?php if ($props['icon'] && $props['icon_align'] == 'right') : ?>
            <?php echo $icon($props, '') ?>
            <?php endif ?>

        <?php echo $button->end() ?>

    </div>