JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" class="myButton">
  <div class="ok">fdasfafasdfadsf</div>
</a>
<div class="slidingDiv">
  <div class="lstpstad">
 <div class="rlpls">
    <div class="rldt">
      <div class="imgs_w"><img src="https://fbcdn-sphotos-a-a.akamaihd.net/hphotos-ak-xpa1/t1.0-9/1239905_694621183899523_202248837_n.jpg"/></div>
      <div class="rlblg">
         <div class="rlchck">Satsılık/Villa</div>
         <div class="rlyr">Adana/Çukurova</div>
         <div class="rlfyt">300.000 TL</div>
      </div>
    </div>
    <div class="rlert">145 kişi6</div>
    <div class="rklmrsm">--</div>
    <div class="tntmyp">
       <div class="rltnyp"> <a href="#" class="rltnypbtn">Tanıtımınısssss Yapp</a> </div>
    </div>
  </div>

</div> <a href="#" class="show_hide">hifdsdexx</a>
</div>
<div class="test">tesdddffffdxtcv</div>

CSS

.myButton {
    width: 160px;
    height: 28px;
    padding: 0;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    color: rgba(0,0,0,1);
    font: normal 12px/28px "Lucida Grande";
    border: 1px solid rgba(128,128,128,1);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    background-image: rgba(235,235,235,1);
    background-image: -webkit-linear-gradient(top, #ffffff 0%,#f6f7f8 100%);
    background-image: -moz-linear-gradient(top, #ffffff 0%,#f6f7f8 100%);
    background-image: -o-linear-gradient(top, #ffffff 0%,#f6f7f8 100%);
    background-image: -ms-linear-gradient(top, #ffffff 0%,#f6f7f8 100%);
    background-image: linear-gradient(top, #ffffff 0%,#f6f7f8 100%);
}
.ok{
  background:url(http://upload.wikimedia.org/wikipedia/commons/3/3c/1rightarrow.png) no-repeat;
 background-position:right;
}
.slidingDiv {
    height:150px;
    background-color: #99CCFF;
    padding:20px;
    margin-top:5px;
    border-bottom:5px solid #3399FF;
    width: 50%;
    position:absolute;
    left: -9999px;
}
 
.show_hide {
    display:none;
}
.lstpstad {
	float:left;
	width:508px;
	height:213px;
	overflow:scroll;
	}
.rlpls {
  float:left;
  width:508px;
  height:80px;
  border-bottom:1px solid #d8dbdf;
}
.rldt {
 float:left;
  width:191px;
  height:80px;
  border-right:1px solid #e7e7e7;
}
.lstpstad .rlpls:nth-child(even) { /*(even) or (2n+0)*/
	background: #d8dbe0;
}
.lstpstad .rlpls:nth-child(odd) { /*(odd) or (2n+1)*/
	background: #f4f4f4;
}
.rlert{
	float:left;
	width:85px;
	height:80px;
	line-height:80px;
	font-family:'lucida grande',tahoma,verdana,arial,sans-serif;
	font-size:12px;
	font-weight:bold;
	text-align:center;
	color:#333333;
	border-right:1px solid #e7e7e7;
	}
.rklmrsm {
	float:left;
	width:85px;
	height:80px;
	line-height:80px;
	font-family:'lucida...

JavaScript

$('.imgs_w img').load(function () {
    var image = $(this),
        height = image.height(),
        width = image.width();

    if (width > height) {
        image.addClass('height');
        var middle = 0 - (image.width() - image.closest('.imgs_w').width()) / 2;
        image.css('margin-left', middle + 'px');
    } else {
        var middle = 0 - (image.height() - image.closest('.imgs_w').height()) / 2;
        image.css('margin-top', middle + 'px');
    }
    
    $('div.slidingDiv').css('left', 0);
    $('div.slidingDiv').hide();
});
 $(function(){
   
    // Watch for clicks on the "slide" link.
    $('div.ok').click(function () {
        // When clicked, toggle the "view" div.
        $('div.slidingDiv').slideToggle(400);
        return false;
    });
  });