How to prevent tabs from opening all at once

Question

I'm stuck on a plugin I'm writing to show and hide content in large texts. The html below is loaded using shortcode in the text editor.

<p>Completely synergize resource
  <a href="#" class="btn-context">   
    solutions.
  </a>
</p>

<p class="inside-context">
  Dynamically innovate resource-leveling
</p>

My jQuery obviously opens all paragraphs with class .inside-context. But there could be multiple shortcodes in one post, so I only want to show the content of the link clicked on.

 $(".btn-context").on('click', function (event) {.
        if ($('.inside-context').hasClass('open')) {
            $('.inside-context').removeClass('open');
        } else {
            $('.inside-context').addClass('open');
        }

        event.preventDefault();
 });

I tried:

• Using $(this), but that only works for the link, which doesn't really matter.
• Reaching the closest paragraph with class .inside-context using selectors such as .closest() and .find(), but this isn't going to do it because .inside-context is not nested.

After trying a lot I thought I might be forced to add more attributes to make it work, so I added an ID to both shortcodes and incrementing the value of the ID for every shortcode added. (Just because I don't want to manually set ID's every time I wrap the text in shortcode)

This could work, but I still haven't found a way to make this work with jQuery. My shortcode with incrementing ID.

function context( $content=null ) {
  STATIC $id = 0;
  $id++;

  $content = preg_replace( '/<br class="nc".\/>/', '', $content );
  $result = '<p id="'. $id .'" class="inside-context">';
  $result .= do_shortcode( $content );
  $result .= '</p>';

 return force_balance_tags( $result );
}

How I should approach this? I wan't to keep it as simple as possible to use in the text editor.

The full thing is in this JSfiddle.

Answer 1

As you mentioned in the comment, inside-context paragraphs will be just next to clicked anchor's parent, this code will work:

 $(".btn-context").on('click', function (event) {
        event.preventDefault();
        $('.inside-context').removeClass('open');
        $(this).parent().next('p.inside-context').addClass('open');

 });