JSFiddle - React, Tailwind, and code Playground

by Brad Christie

HTML

<div>
    <a href="#" rel="view-show-info" class="view-more">
        <img src="" class="expand" alt="Expand Selection" />
    </a>
</div>
<div class="show-info">
    <p>
        Expanded content would go here.
    </p>
</div>

CSS

.show-info {
    background-color: #AAA;
    display: none;
    min-height: 50px;
}

JavaScript

// your original image locations
var expand = '/images/plus.png';
var collapse = '/images/minus.png';

// me overwriting them for demo purposes
// my sincere applogies to inbusiness for leeching
expand = 'http://storehandler.inbusiness.com.au/vendita/images/Expand.png'; // ;
collapse = 'http://storehandler.inbusiness.com.au/vendita/images/Expand_Vertical.png'; // ;

// initial setup, we're using bogus images here. (this is only
// needed for the purposes of this demo)
$('.expand').attr({'src':expand,'title':'Expand Selection'});

// Your code, modified
$("a[rel='view-show-info']").click(function() {
    // grab the elements we're working with
    var anchor = $(this);
    var image = $('img',this);
    var info = $(this).parent().next('.show-info');

    // do the prep work of figuring out image location and text
    var image_src = expand;
    var image_title = 'expand selection';
    if (image.attr("src") == expand) // == "<?=base_url();?>assets/images/plus.png")
    {
      image_src = collapse;
      image_title = 'collapse selection';
    }
    
    // now make the changes
    info.slideToggle(70);
    image.attr({'src':image_src,'alt':image_title});
    anchor.attr('title',title);

    return false;
});