-
AuthorPosts
-
November 24, 2020 at 8:38 pm #1262801
Hi there,
found this cool solution to toggle some content:
https://kriesi.at/support/topic/expandable-text-block/I want to use it 3 Times on the same page.. so I expand the function:
add_action(‘wp_footer’, ‘ava_custom_script’, 10);
function ava_custom_script(){
?>
<script>
(function($) {
$(‘.click-learn-more’).on(‘click’, function() {
$(‘.learn-this’).toggle();
});
$(‘.click-learn-more2’).on(‘click’, function() {
$(‘.learn-this2’).toggle();
});
}(jQuery));
</script>
<?php
}Is there a way that the open one closed, when I click another one?
Thank you very much in advance! KiM
November 28, 2020 at 10:06 pm #1263707Hey Blatze,
Sorry for the late very reply, I rewrote this script a little and added a “span” around each content “block”. I created a test page on your site so you could examine a working example, please see the link in the Private Content area.
This is the HTML I used in a code block element on the test page:<span class="learn-more">Opening content <a class="click-learn-more" href="#">Learn more…</a> <span class="learn-this">Toggled content</span> </span>
I then cloned the code block 6 times.
This is the function I added to your functions.php, I also disabled your other function and css.function custom_toggle_script() { ?> <script> (function($){ $(document).ready(function(){ $('.learn-this').hide(); $('.click-learn-more').click(function(e){ e.preventDefault(); var $this = $(this).parent().find('.learn-this'); $(".learn-this").not($this).hide(); $this.toggle(); }); }); })(jQuery); </script> <?php } add_action('wp_footer', 'custom_toggle_script');
now on the test page only one toggle will be open at a time.
Best regards,
MikeDecember 9, 2020 at 4:20 pm #1266024Hey Mike!
Thank you very much for your help! :)
Best KiM
December 9, 2020 at 8:52 pm #1266106Hi Blatze,
Glad we could help :)
If you need further assistance please let us know.
Best regards,
Victoria -
AuthorPosts
- The topic ‘Toogle content’ is closed to new replies.