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>
</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() {
// 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).next('.toggle').toggle('slow');
// return false so any link destination is not followed
return false;
});
});