0

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.

  • So, is this guaranteed that paragraph containing class inside-context would be the next one from the paragraph containing anchor having class btn-context? – Apul Gupta Oct 1 '14 at 14:42
  • Hello Apul. Yes, it is. – Tim Oct 1 '14 at 15:26
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');

 });
  • Thank you Apul, nice and simple solution. Just the way I need it. – Tim Oct 1 '14 at 16:27
  • 1
    "Then try this solution" is not a proper explanation. Please file an edit and add an explanation to how your code works and what it does – Pieter Goosen Oct 1 '14 at 16:29
  • @PieterGoosen please review it again. thanks for correcting me. – Apul Gupta Oct 1 '14 at 18:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.