JSFiddle - React, Tailwind, and code Playground

by hslincoln

HTML

<!-- 
Working version here: V2
Working UAT Code: V3 
Working .on version here: V4
Append code: V5
-->

<img src="http://jmldirect.uat.venda.com/content/ebiz/shop/resources/images/+.png" id="#brandsID" class="brands-toggle">
<div id="brandsID" style="display:none">some content</div>

JavaScript

// 1.0 START Category button expands
	// 1.1 Brands toggle

jQuery(".wpShadow").delegate( ".brands-toggle", "click", function() {
    var collapse_content_selector = jQuery(this).attr('id');
    var toggle_switch = jQuery(this);
    jQuery(collapse_content_selector).toggle(function () {
        if (jQuery(this).css('display') == 'none') {
            toggle_switch.attr("src", toggle_switch.attr("src").replace("-.png","+.png"));
        } else {
            toggle_switch.attr("src", toggle_switch.attr("src").replace("+.png", "-.png"));
        }
    });
});

	// 1.2 Add the CategoryResults show button
jQuery(document).ready(function() {
    if (jQuery('.collateheading').length !== 0) {
        jQuery('h3#parentCategoryName.collateheading').after('<img src="http://jmldirect.uat.venda.com/content/ebiz/shop/resources/images/+.png" id="#parentCategoryNameresults" class="categories-toggle">');

    }});

jQuery(".wpShadow").delegate( ".categories-toggle", "click", function() {
    var collapse_content_selector = jQuery(this).attr('id');
    var toggle_switch = jQuery(this);
    jQuery(collapse_content_selector).toggle(function () {
        if (jQuery(this).css('display') == 'none') {
            toggle_switch.attr("src", toggle_switch.attr("src").replace("-.png","+.png"));
        } else {
            toggle_switch.attr("src", toggle_switch.attr("src").replace("+.png", "-.png"));
        }
    });
});