JSFiddle - React, Tailwind, and code Playground

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 -->
                
        
				</div><!-- /.meta first_lang -->
				<!-- language button hide -->
         <a class ="show_hide toggleLink "> ANOTHER LANGUAGE OPEN</a> 
				  
				
                //this next div is supposed to open
				<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

// this tells jquery to run the function below once the DOM is ready
jQuery(document).ready(function() {
 
// choose text for the show/hide link - can contain HTML (e.g. an image)
var showText='Show';
var hideText='Hide';
 
// initialise the visibility check
var is_visible = false;
 
// append show/hide links to the element directly preceding the element with a class of "toggle"
// now disabled and class is given inline
//jQuery('.toggle').prev().append(' (<a href="#" class="toggleLink">'+showText+'</a>)');
 
// hide all of the elements with a class of 'toggle'
jQuery('.toggle').hide();
 
// capture clicks on the toggle links
jQuery('a.toggleLink').click(function(e) {
 e.preventDefault();
// switch visibility
is_visible = !is_visible;
 
// change the link depending on whether the element is shown or hidden
jQuery(this).html( (!is_visible) ? showText : hideText);
 
// toggle the display - uncomment the next line for a basic "accordion" style
//jQuery('.toggle').hide();jQuery('a.toggleLink').html(showText);
jQuery(this).siblings('.toggle').toggle('slow');
 
// return false so any link destination is not followed
return false;
 
});
});