JSFiddle - React, Tailwind, and code Playground

by Marc

HTML

<div class="content">
<div id="sliderContent">
<h1>headline</h1>

    <p><img src="img.jpg" style="float: left; margin-right: 10px;" height="93" width="100" /><strong>why is this hidden? I want to be able to use < a > or < span > or  < b ></strong>, here some text, here some text, here some text, here some text, here some text, here some text, here some text, here some text, here some text, here some text, here some text, here some text, </p><p class="clear"></p>
<img class="btn-down" src="btn.jpg" height="21" width="21" alt="Show more" /> 
    <div class="p-t5">
      <p>more text more text more text more text more text more text more text more text more text more text more text more text </p>
    </div>
<div class="clear"></div><hr>
<div id="sliderContent">
  <div class="p-r25">
    <h2>headdd</h2>
    
      <p><img src="imgg.jpg" style="float: left; margin-right: 10px;" height="93" width="100" />text teztx ytexthere some text, here some text, here some text, here some text, here some text, here some text, here some text, here some text, here some text, here some text, here some text, </p><p class="clear"></p>
      <img class="btn-down" src="btn.gif" height="21" width="21" alt="Show more" /> 
    <div class="p-t5">
      <p>more text more text more text more text more text more text more text more text </p> 
    </div>       
  </div>

</div>

CSS

html,body{height: 100%; margin:0; padding:0;}
html{overflow-y: scroll; -webkit-overflow-scrolling: touch; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased;}

body,td{font-family:Verdana; font-size:13px; line-height:19px; color:#000;}


/* ALGEMEEN */
a:link{color:#e5467e; text-decoration:none;}
a:visited{color:#e5467e; text-decoration:none;}
a:hover{color:#e5467e; text-decoration:underline;}
a:active{color:#e5467e; text-decoration:none;}

.clear, p.clear{clear:both; height:0px; overflow:hidden; margin:0; padding:0;}
p{margin-top:0; padding-top:0;}
:focus{outline:none;}

hr, hr.hr{padding:0; margin:15px 0; overflow:hidden; height:1px; border:0px; background:#aaa;}
a img{border:0;}


h1, h2{margin:0; padding:0 0 10px; font-weight:normal!important; color:#e5467e; line-height:24px; font-size:19px; font-family: 'MyriadProBold';}

.content{float:left; width:510px; padding:2px 50px 0 20px; margin-left:81px; border-right:1px solid #aaa;}

.p-r25{padding-right:30px;}
.p-t5{padding-top:8px;}
#sliderContent div div ul{margin-bottom:10px;}
.btn-down{margin-left:489px; position:absolute; margin-top:-33px; cursor:pointer;}

JavaScript

$(function() {
        $("#sliderContent img.btn-down").next().hide().append('<input value="Show less" type="button" class="btn" />');
        
        $("#sliderContent img.btn-down").click(function() {
            $(this).next().slideToggle();
        });
        
        $("input.btn").click(function() {
            $(this).parent().slideUp();
        });
    });