JSFiddle - React, Tailwind, and code Playground

by zebra

HTML

<div class="news">
    !tratatata <span class="short-news">short news</span>
    <div class="news-text">news 1</div>
</div>
<div class="news">
    ! tratatata2 <span class="short-news">short news</span>
    <div class="news-text">news 1</div>
</div>
<div class="news">
    ! tratatata3 <span class="short-news">short news</span>
    <div class="news-text">news 1</div>
</div>

CSS

.news { border: 1px dotted #c2c2c2; margin: 5px; padding:10px; cursor: pointer;}
.news-text { display: none; }

JavaScript

$(document).ready(function() {
    $('.news').click(function() {
        var $this = $(this), news_text = $this.find('div.news-text'),
            short_news = $this.find('.short-news'), 
            all_news = $('.news').not($this);
        all_news.find('div.news-text').slideUp();
        all_news.find('.short-news').show();
        if(news_text.is(':visible')) {
            news_text.slideUp();   
            short_news.show();
        }
        else {
            news_text.slideDown();
            short_news.hide();
        }
    });        
});