JSFiddle - React, Tailwind, and code Playground

Siblings show hide

by lovromar

HTML

<li class="current ">
    <!-- Open ITEM -->	<a href="#Une Maison Beaujolaise" class="gg title">TITLE</a>

    <img src="http://dummyimage.com/800x35/d9d9d9/333632.png&text=SOME+TITLE+IMAGE"
    />
    <div class="meta first_lang">
        <div class="postmeta"><span class="post-meta-key">Status:</span>yyy</div>
        <div class="postmeta"><span class="post-meta-key">Lage:</span>yyy</div>
        <div class="postmeta"><span class="post-meta-key">Team:</span>yyy</div>
        <div class="postmeta"><span class="post-meta-key">Fläche:</span>yyy</div>
        <div class="postmeta"><span class="post-meta-key">Datum:</span>yyy</div>
        <div class="postmeta"><span class="post-meta-key">Budget:</span>yyy</div>
        <!-- WHEN MOVING THE
        LINK TO HERE , I CAN NOT MAKE IT WORK -->
        <a class="show_hide toggleLink "> ANOTHER LANGUAGE OPEN</a> //this next
    div is supposed to open
    </div>
    <!-- /.meta first_lang -->
    <!-- language button hide --> 
    <div class="meta second_lang toggle">
            <div class="postmeta"><span class="post-meta-key">Status:</span>xxx</div>
            <div class="postmeta"><span class="post-meta-key">Lage:</span>xxx</div>
            <div class="postmeta"><span class="post-meta-key">Team:</span>xxx</div>
            <div class="postmeta"><span class="post-meta-key">Fläche:</span>xxx</div>
            <div class="postmeta"><span class="post-meta-key">Datum:</span>xxx</div>
            <div class="postmeta"><span class="post-meta-key">Budget:</span>xxx</div>
        </div>
    <!-- /.second_lang -->
    <div> <span> Some other content</span>

    </div>
</li>
<!-- Close ITEM -->

JavaScript

jQuery(document).ready(function () {


    var showText = 'Show';
    var hideText = 'Hide';


    var is_visible = false;

    jQuery('.toggle').hide();


    jQuery('a.toggleLink').click(function (e) {
        e.preventDefault();
        is_visible = !is_visible;
        jQuery(this).html((!is_visible) ? showText : hideText);
        jQuery(document).find('.toggle').toggle('slow');
        return false;
    });
});