JSFiddle - React, Tailwind, and code Playground

by maikeldus

HTML

<div class="menu-item">
    <div href="#" class="title closed">
        Item 1
        <span class="indicator">+</span>
    </div>
    <div class="content">
         Grand Theft Auto TOM is een bekend Lady Gaga fan op GTAForum!       
    </div>
</div>
<div class="menu-item">
    <div href="#" class="title closed">
        Item 2
        <span class="indicator">+</span>
    </div>
    <div class="content">
         Maikle is een bekende hater op GTAForum!
        <br />
        <img src="http://placekitten.com/200/225" alt="So cute :)" />
    </div>
</div>

CSS

.menu-item {
    position: relative;
    /* 70% for this demo */
    width: 70%;
    font-size: 14px;
}
.menu-item > .title {
    color: white;
    font-weight: bold;
    font-size: 16px;
    padding: 10px;
    cursor: pointer;
}

.menu-item > .open {
      background-color: #1E5384;      
}

.menu-item > .closed {
      background-color: #396c97;      
}

.menu-item .indicator {
    position: relative;
    float: right;
    padding-right: 15px;
}
.menu-item > .content {
    display: none;
    text-align: center;
    -webkit-animation: tossPhotoFrame 0.5s linear;
    -moz-animation: tossPhotoFrame 0.5s linear;
    -o-animation: tossPhotoFrame 0.5s linear;
}


@-webkit-keyframes tossPhotoFrame {
    0% {  -webkit-transform: rotate(-30deg) scale(1.3) translate(-20px,-250px); 
          opacity: 0; 
          -webkit-animation-timing-function: ease-in-out; 
          }
    100% { -webkit-transform: rotate(0deg) scale(1) translate(0,0); 
           opacity: 1; 
           }
}

@-moz-keyframes tossPhotoFrame {
    0% {  -moz-transform: rotate(-30deg) scale(1.3) translate(-20px,-250px); 
          opacity: 0; 
          -moz-animation-timing-function: ease-in-out; 
          }
    100% { -moz-transform: rotate(0deg) scale(1) translate(0,0); 
           opacity: 1; 
           }
}

@-o-keyframes tossPhotoFrame {
    0% {  -o-transform: rotate(-30deg) scale(1.3) translate(-20px,-250px); 
          opacity: 0; 
          -o-animation-timing-function: ease-in-out; 
          }
    100% { -o-transform: rotate(0deg) scale(1) translate(0,0); 
           opacity: 1; 
           }
}

JavaScript

$(document).ready(function(){
    

    $('.menu-item > .title').click(function(){
        var $content = $(this).parent().find('.content');
        var $title = $(this).parent().find('.title');
        var $indicator =  $(this).find('.indicator');
        var new_content_display;
        var indicator;
        if($content.css('display') == 'block') {
            new_content_display = 'none';
            indicator = '+';
            $title.addClass('closed');
            $title.removeClass('open');
        } else {
            new_content_display = 'block';
            indicator = '-';
            $title.addClass('open');
            $title.removeClass('closed');
        }
        $indicator.text(indicator);
        $content.css('display', new_content_display );
    });


    

});