JSFiddle - React, Tailwind, and code Playground

by acturbo

HTML

<div id="cursor01" class="slide_menu"> 
	<span id="m-slide01" class="slide_down"><span>&#9658;</span> Title01 </span>
</div> 
<div id="cursor02" class="slide_menu"> 
	<span id="m-slide02" class="slide_down"><span>&#9658;</span> Title02 <--- will be the only that works currently</span>
</div> 
<div id="cursor03" class="slide_menu"> 
	<span id="m-slide03" class="slide_down"><span>&#9658;</span> Title03 </span>
</div> 

<div id="slide01" class="slide_content" style="display:none"> Text01....</div>
<div id="slide02" class="slide_content" style="display:none"> Text02....</div>
<div id="slide03" class="slide_content" style="display:none"> Text03......</div>

CSS

.slide_menu{
    color: #007700;
}   
.slide_content{
    color: #000088;
}

JavaScript

$(function () {
    /*--------------------------------------------------------
    // Option 1: affects ALL divs with class = slide_menu 
    $(".slide_menu").keypress(function(e) {
        // 13 = enter, 9 = tab
        if ( (e.which == 13) || (e.which == 9) ) {        
           $(this).click();
        }
    }); // end 
    */
    
    /*--------------------------------------------------------
    // Option 2: affects ALL divs with class = slide_menu 
    $(".slide_menu").click(function () {

        var $this = $(this).find("span");
        var id = $this.attr("id");
        var divToShow = "#" + id.substr(2);

        //console.log( divToShow );

        if ($(divToShow).is(':hidden')) {
            $($this).find("span").html("&#9660;");
        } else {
            $($this).find("span").html("&#9658;");
        }
       
        $(divToShow).stop(true, true).slideToggle("fast");

        return false;

    }); // end
*/
    //--------------------------------------------------------
    // Option 3. affects just div with id = cursor02 
    $("#cursor02").click(function () {

        var $this = $(this).find("span");
        var id = $this.attr("id");
        var divToShow = "#" + id.substr(2);

        if ($(divToShow).is(':hidden')) {
            $($this).find("span").html("&#9660;");
        } else {
            $($this).find("span").html("&#9658;");
        }
                
        $(divToShow).stop(true, true).slideToggle("fast");

        return false;

    }); // end    
})