JSFiddle - React, Tailwind, and code Playground

by Brad Christie

HTML

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

CSS

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

JavaScript

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

// initial setup, we're using bogus images here.
$('.expand').attr({'src':expand,'title':'Expand Selection'});

// Your code, modified
$("a[rel='view-show-info']").click(function() {
    $(this).parent().next('.show-info').slideToggle(70);

    var img = $("img", this).attr("src");
    var src = '/images/plus.png';
    var title = 'expand selection';
    if( img == "<?=base_url();?>assets/images/plus.png")
    {
      src = '/images/minus.png';
      title = 'collapse selection';
    }
    $("img", this) // grab your image (per normal)
      .attr({'src':src,'alt':title}) // change the source
      .closest('a') // go up the three to find the anchor
      .attr('title',title) // change the anchor's title

    return false;
});