WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Help with shortcodes (3 posts)

  1. voddie
    Member
    Posted 4 years ago #

    Hi

    I am trying to create a shortcode that will toggle content in a <div> when the link is clicked and would like some advice to get them working properly.

    Here's my html

    <h2 class="my-slidetoggle"><a href="#">Toggle Title</a></h2>
    <div class="toggle-content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a porta nulla. Ut fermentum faucibus leo a pretium.</p></div>

    Here's my js code

    jQuery(document).ready(function() { // hides the slickbox as soon as the DOM is ready
    	jQuery('.toggle-content').hide(); // toggles the slickbox on clicking the noted link
    	jQuery('h2.my-slidetoggle').click(function() {
    	jQuery('.toggle-content').slideToggle(400); return false;
    }); });

    And here is what Ive put in my functions.php

    function toggle_func( $atts, $content = null ) {
    	extract(shortcode_atts(array(
            'title'      => '',
        ), $atts));
    
    	$out .= '<h2 class="my-slidetoggle"><a href="#">' .$title. '</a></h2>';
    	$out .= '<div class="toggle-content" style="display: none;">';
    	$out .= '<div class="block">';
    	$out .= do_shortcode($content);
    	$out .= '</div>';
    	$out .= '</div>';
    
       return $out;
    }
    add_shortcode('toggle', 'toggle_func');

    The problem I have run into is when there are more than one shortcode is used in a page, they all open and close when one link is clicked.

    Could someone please explain how do I get them to work individually/independently without writing a shortcode for each toggle used?

    Thanks in advance

    Voddie

  2. voddie
    Member
    Posted 4 years ago #

    Don't worry, found the solution

  3. jb1013
    Member
    Posted 3 years ago #

    Care to post your solution?

    Thanks!

Topic Closed

This topic has been closed to new replies.

About this Topic