JSFiddle - React, Tailwind, and code Playground

by abdallha dagga

HTML

<div id="iklan-teks">
       <!-- ايقونة المعلومات -->
  <span class='info-iklan'>أعلن على مدونة ابواياد</span>
    <span class='info-icon'><a href='https://www.facebook.com/abuiyad007' target='_blank'><img alt='info' src='http://2.bp.blogspot.com/--ivaHIgXThk/UnJWU80FLhI/AAAAAAAAF_Y/WrH-8aYijGw/s1600/info-iklan.png'/></a></span>  
    <!-- الاعلان 1 -->
    <div data-header="العنوان الرئيسي" style="border-top:none">
        <span class='isi-iklan'><a class='judul' href='#' target='_blank'>العنوان الرئيسي</a>
            <a href='#' target='_blank'>رابط الموقع سيظهر باللون الاخضر</a>
        <span class='isi'>هنا نضع وصف الاعلان  مثلا تخصص الموقع ومجالاته والخ</span>
            <a class='panah-besar' href='#' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='http://2.bp.blogspot.com/-oIxrG3fvdj4/UnGxCH3EV9I/AAAAAAAAF_I/YBTBdMJO6VM/s1600/icon_chevron_white.png'/></a>
        </span>
    </div>
    <!-- الاعلان 2 -->
    <div data-header="مدونة ابواياد">
        <span class='isi-iklan'><a class='judul' href='http://www.abu-iyad.com/' target='_blank'>مدونة ابواياد</a>
            <a href='http://www.abu-iyad.com/' target='_blank'>www.abu-iyad.com</a>
            <span class='isi'>مدونة ابواياد هي مدونة متخصصة في عالم بلوجر 
            <a class='panah-besar' href='http://www.abu-iyad.com/' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='http://2.bp.blogspot.com/-oIxrG3fvdj4/UnGxCH3EV9I/AAAAAAAAF_I/YBTBdMJO6VM/s1600/icon_chevron_white.png'/></a></span>
        </span>
    </div>
    <!-- اعلان 3 -->
 <div data-header="العنوان الرئيسي" style="border-top:none">
        <span class='isi-iklan'><a class='judul' href='#' target='_blank'>العنوان الرئيسي</a>
            <a href='#' target='_blank'>رابط الموقع سيظهر باللون الاخضر</a>
        <span class='isi'>هنا نضع وصف الاعلان  مثلا تخصص الموقع ومجالاته والخ</span>
            <a class='panah-besar' href='#'...

CSS

body {
    background:#e0e5ec;
}


#iklan-teks {
  
  width:304px;
  height:259px;
  background:#82a5ce;
  position:relative;
  overflow:hidden;
  margin:30px auto;
}
#iklan-teks h2.iklan-header {
  cursor:pointer;
  background:#82a5ce;
  background-image:none;
  font:normal 20px Verdana, Tahoma,Serif;
  color:white;
  border-top:1px solid #d8d8d8;
  padding:10px;
  margin:0 0;
  position:relative;
  text-transform:none;
  letter-spacing:0;
}
#iklan-teks h2.iklan-header:first-child {
  border-top:none;
}
#iklan-teks h2.active {
  display: none;
}
#iklan-teks h2.iklan-header:before{
  content:"";
  width:0;
  height:0;
  position:absolute;
  top:20px;
  right:15px;
  border:5px solid transparent;
  border-color:#b2b2b2 transparent transparent;
}
#iklan-teks div {
      background:  #82a5ce;
  height:100px;
  padding:10px 70px 10px 10px;
  font:normal 13px Verdana, Tahoma,Serif;
  color:white;
  border-top:1px solid #d8d8d8;
}
.judul {
  font:normal 20px Verdana, Tahoma,Serif;
  color:white;
  margin:0 0 5px 0;
}
a.judul{
  font:normal 20px Verdana, Tahoma,Serif !important;
  color:white !important;
  text-decoration:none;
  display:inline-block;
}
a:hover.judul {
  font:normal 20px Verdana, Tahoma,Serif !important;
  color:white;
  text-decoration:underline;
}
.isi-iklan a{
  font:normal 13px Verdana, Tahoma,Serif;
  color:green;
  text-decoration:none;
  display:block;
  margin-bottom:10px;
}
.isi-iklan a:hover{
  color:green;
  text-decoration:none;
}
.isi {
  padding-top:15px;
  color:#FFF;
  text-align:left !important;
}
.panah-besar {
  background: #4d90fe;
  border-radius: 50%;
  cursor: pointer;
  height: 34px;
  float: right;
  margin-right: -60px;
  margin-top: -40px;
  width: 34px;
  text-align: center;
  line-height: 34px;
}
.panah-besar:hover {
  background: #4472bd;
}
.info-icon {
  width:15px;
  height:15px;
  position:absolute;
  top:0;
  right:0;
  cursor:pointer;
}
.info-iklan {
  background:#d3d3d3;
  width:100px;
  height:15px;
 ...

JavaScript

(function($) {
    $.fn.iklanaccordion = function(settings) {
        settings = jQuery.extend({
            active: 1,
            sUpSpeed: 40,
            sDownSpeed: 40,
            sUpEasing: null,
            sDownEasing: null
        }, settings);

        return this.each(function() {
            var $this = $(this),
                $item = $this.children('div[data-header]'),
                activePanel = settings.active - 1;

            $item.each(function() {
                $(this).hide().before('<h2 class="iklan-header">' + $(this).data('header') + '</h2>');
            });

            $this.children('div:eq(' + activePanel + ')').show().prev().addClass('active');
            $this.find('.iklan-header').on("mouseover", function() {
                $this.children('h2').removeClass('active');
                $item.slideUp(settings.sUpSpeed, settings.sUpEasing);
                $(this).addClass('active').next().slideDown(settings.sDownSpeed, settings.sDownEasing);
            });

        });
    };

})(jQuery);

$(function() {
    $('#iklan-teks').iklanaccordion();
});
$(document).ready(function() {
    $('.info-icon').hover(function() {
        $('.info-iklan').toggle();
    });
});