Wie verhindert man, dass Tabs alle gleichzeitig geöffnet werden?

Ich stecke auf einem Plugin fest, das ich schreibe, um Inhalte in großen Texten anzuzeigen und auszublenden. Der folgende HTML-Code wird mit dem Shortcode im Texteditor geladen.

Completely synergize resource solutions.

Dynamically innovate resource-leveling

Meine jQuery öffnet offensichtlich alle Absätze mit der class .inside-context. Aber es könnte mehrere Shortcodes in einem Post geben, also möchte ich nur den Inhalt des angeklickten Links anzeigen.

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

Ich habe es versucht:

  • Mit $ (this), aber das funktioniert nur für den Link, der eigentlich keine Rolle spielt.
  • Erreichen des nächsten Absatzes mit der class .inside-context unter Verwendung von Selektoren wie .closes () und .find (), aber dies wird es nicht tun, weil .inside-context nicht verschachtelt ist.

Nachdem ich viel versucht hatte, dachte ich, dass ich gezwungen sein könnte, weitere Attribute hinzuzufügen, damit es funktioniert. Also fügte ich beiden Shortcodes eine ID hinzu und erhöhte den Wert der ID für jeden hinzugefügten Shortcode. (Nur weil ich die IDs nicht jedes Mal manuell eingeben möchte, wenn ich den Text in den Shortcode einpacke)

Das könnte funktionieren, aber ich habe immer noch keinen Weg gefunden, dies mit jQuery zu machen. Mein Shortcode mit steigender ID.

 function context( $content=null ) { STATIC $id = 0; $id++; $content = preg_replace( '/
/', '', $content ); $result = '

'; $result .= do_shortcode( $content ); $result .= '

'; return force_balance_tags( $result ); }

Wie soll ich das angehen? Ich möchte es so einfach wie möglich im Texteditor verwenden.

Die ganze Sache ist in diesem JFiddle.

Solutions Collecting From Web of "Wie verhindert man, dass Tabs alle gleichzeitig geöffnet werden?"

Wie Sie bereits im Kommentar erwähnt haben, befinden sich die Absätze innerhalb des Kontexts direkt neben dem übergeordneten Element des angeklagten Ankers. Dieser Code funktioniert:

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