JSFiddle - React, Tailwind, and code Playground

by aaccioly

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>CSSSprites.com generated page</title>
</head>
<body>
    <a href="#" class="toggle_button"> 
        <span class="button_sprite">&nbsp;</span> 
        <b>asdasdads</b>   
    </a>
    <div class="toggle_text">
        Desenvolvimento de um conjunto de extensões para a plataforma IEDA que permitem a administração de devices Juniper Junos. Tecnologia: <i>Java, Cisco ANA, JBoss 6, VRaptor 3, Hibernate, FreeMarker, JAX-WS, JAXB, Quartz e Oracle 11g.</i>
    </div>     
    <a href="#" class="toggle_button"> 
        <span class="button_sprite">&nbsp;</span>
        <b>asdasdads</b>   
    </a>
        <div class="toggle_text">
        Desenvolvimento de um conjunto de extensões para a plataforma IEDA que permitem a administração de devices Juniper Junos. Tecnologia: <i>Java, Cisco ANA, JBoss 6, VRaptor 3, Hibernate, FreeMarker, JAX-WS, JAXB, Quartz e Oracle 11g.</i>
    </div>
    <br /> 
</body>
</html>

CSS

span.button_sprite {
        background: url('https://lh6.googleusercontent.com/--Zwq5yEhQhE/T7JM3ry9ApI/AAAAAAAAFrs/6g4La9XblAA/s800/button_sprite.png');
        width: 19px;
        height: 19px;
        display: inline-block; 
        vertical-align: text-bottom;       
    }
    
    span.button_sprite_minus {
        background-position: -0px -29px;               
    }  

    a.toggle_button {
        text-decoration: none; 
        display: block;   
    }

    div.toggle_text {
        display: none;
    }

JavaScript

$('a.toggle_button').click(function(e) {
    var theLink = $(this);
    var theButton = $('span.button_sprite', theLink);
    var theDiv = $(theLink).next('div.toggle_text');
    
    theButton.toggleClass('button_sprite_minus');
    theDiv.slideToggle(400);
    e.preventDefault();
});