WordPress.org

1. voddie
   Member
   Posted 1 year 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 1 year ago #

   Don't worry, found the solution

3. jb1013
   Member
   Posted 1 year ago #

   Care to post your solution?

   Thanks!

Topic Closed

This topic has been closed to new replies.