JSFiddle - React, Tailwind, and code Playground

by Osman Salihovic

HTML

<div style="float:left" > 
  <p><b>This is just quick example for guru.com :)</b></p>
  <div class="faq_list">
        <p class="head">Category 2</p>
        <div class="menu_body">
            <div class="item" href="#">Item 1 (Click here)</div>
                <div class="item_body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <a class="link" href="http://www.google.com">Lorem Impsum</a> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
            <div class="item" href="#">Item 2</div>
                <div class="item_body">Lorem ipsum dolor sit amet, <b>consectetur</b> adipisicing elit,<br> sed do eiusmod tempor incididunt ut labore et dolore<br> magna aliqua. <a class="link" href="http://www.google.com">Lorem Impsum</a> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      <div class="item" href="#">Item 3</div>
    <div class="item_body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <a class="link" href="http://www.google.com">Lorem Impsum</a> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
        </div>
        <p class="head">Category 2</p>
        <div class="menu_body">
            <div class="item" href="#">Item 1</div>
                <div class="item_body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <a class="link" href="http://www.google.com">Lorem Impsum</a> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
            <div class="item" href="#">Item 2</div>
                <div class="item_body">Lorem ipsum dolor sit amet, <b>consectetur</b> adipisicing...

CSS

body {
    margin: 10px auto;
    font: 75%/120% Verdana,Arial, Helvetica, sans-serif;
}
.faq_list {    
    width: 600px;
}
.head {
    padding: 5px 10px;
    cursor: pointer;
    position: relative;
    margin:1px;
    font-weight:bold;
    background-color: #0188CC;
    color:#fff;
}
.menu_body {
    display:none;
}
.menu_body .item{
  display:block;
  color:#006699;
  background-color:#F7F7F9;
  padding-left:10px;
  font-weight:bold;
  text-decoration:none;
}
.menu_body .item:hover{
  color: #000000;
  text-decoration:underline;
  cursor: hand; 
  cursor: pointer; 
 }
.item_body{
 display:none;
}
.link{
  background-color:#FCF8E3;
  color:blue;
}

JavaScript

$(document).ready(function()
{
    $("p.head").click(function()
    {
        $(this).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");   
    });
    $("div.item").click(function()
    {
        $(this).next("div.item_body").slideToggle(300).siblings("div.item_body").slideUp("slow");
    });
    
});