Collapse content [closed]

Question

I'm searching for a way to show/hide some content on a page. There a several plugins which do that for me, but they all show the content directly below or in the shortcode and that is not what I want.

I have an button where the user can click on. That button is in a table and the div's (there are multiple) which must be come visible are under the table and not in the same table cell where the button is.

The content under the first table (with the button and link 'show more/less') must be come visible. That must be several times on that specific tab.

I can write some code into a plugin (I'm a beginner with custom WordPress code) but I need some idea's or tips to how to make this.

Answer 1

Solved this.

I created a plugin which loads this js:

function showContent(element){
   $('.huisjes').slideUp();
   if ( $(element).is( ':hidden' ) ) {
     $(element).slideDown('slow');
   } else {
     $( element).slideUp();
   }
}

Then I created two shortcodes:

function createDiv($atts, $content = null) {
   extract(shortcode_atts(array(
      'id' => "",
   ), $atts));
return '<div id="'. $id . '" class="huisjes"  style="display:none;"/>' . $content . '</div>';
}
add_shortcode('huisje', 'createDiv');

function createButton($atts, $content = null) {
   extract(shortcode_atts(array(
       'id' => "",
   ), $atts));
return '<a onClick="showContent('.$id.')" href="javascript:void(0);" class="big-button bigorange">'. $content .'</a>';
}
add_shortcode('huisje_button', 'createButton');

The first code creates an div with the given ID. The second code creates a button (with some css) which links to the function in the JS to show the content.