Jqueryui Stackable (remove Contents On Different Tab Click)

Note: I only have a few days experience with jQuery, although I have searched around to try to fix the issue and tested however it just doesn't work. What I'm trying to achieve: I'

Solution 1:

Try

$(document).ready(function () {
    var content = {
        "server-one": "Aenean eu leo quam."
          + " Pellentesque ornare sem lacinia quam venenatis vestibulum."
          + " Donec id elit non mi porta gravida at eget metus."
          + " <button><a href='/clans'>MORE<two</button>",
        "server-two": "Nulla vitae elit libero, a pharetra augue."
          + " Etiam porta sem malesuada magna mollis euismod."
          + " <button><a href='/clans'>MORE<two</button>",
        "server-three": "Cum sociis natoque penatibus et magnis "
          + "dis parturient montes, nascetur ridiculus mus."
          + " Nullam quis risus eget urna mollis ornare vel eu leo."
          + " <button><a href='/clans'>MORE<two</button>",
        "server-four": "Donec id elit non mi porta gravida at eget metus."
          + " Aenean eu leo quam."
          + " Pellentesque ornare sem lacinia quam venenatis vestibulum."
          + " <button><a href='/clans'>MORE<two</button>"
    };

    $('#server-titles').selectable({
        selected: function (event, ui) {
            var sel = $(ui.selected).attr("class").split(" ")[0];
            var elem = $(".row [class^=" + sel.concat("-info") + "]");
            elem.html(content[sel]).show(0).siblings().hide(0);
             
        }
    });
});

div[class$=image] {
    display:none;
}

/* Server Tabs *//* line 423, ../sass/home.scss */.server-titles-wrapper {
  padding: 0;
}
/* line 425, ../sass/home.scss */.server-titles-wrapperul {
  list-style: none;
  padding-left: 0;
}
/* line 429, ../sass/home.scss */.server-titles-wrapper.server > h3 {
  color: white;
  margin: 0;
  padding: 15px015px15px;
}
/* line 434, ../sass/home.scss */.server-titles-wrapper.light {
  background-color: #6bb3cc;
}
/* line 438, ../sass/home.scss */.server-titles-wrapper.dark {
  background-color: #61a4ba;
}
/* line 442, ../sass/home.scss */.server-titles-wrapper.active {
  background-color: #75c5e0;
}
/* line 445, ../sass/home.scss */.server-titles-wrapper.ui-selected {
  background: #75c5e0;
}
/* line 448, ../sass/home.scss */.server-titles-wrapper.ui-selecting {
  background: #75c5e0;
}

/* line 453, ../sass/home.scss */.server-info {
  padding: 0;
}
/* line 455, ../sass/home.scss */.server-infop {
  color: white;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.5);
  padding: 10px;
  position: absolute;
  bottom: 0;
  margin-bottom: 0;
  font-family: Open-Sans, Trebuchet MS, Serif;
}
/* line 465, ../sass/home.scss */.server-infobutton {
  background: #f4dab9;
  border-radius: 5px;
  margin: 10px0010px;
}
/* line 469, ../sass/home.scss */.server-infobuttona {
  color: #946d3b;
  font-family: Open-Sans, Trebuchet MS, Serif;
  padding: 4px8px;
  text-decoration: none;
}
/* line 476, ../sass/home.scss */.server-info.server-one-info-image {
  background: url(../img/clans.jpg) no-repeat center right;
  height: 224px;
}
/* line 480, ../sass/home.scss */.server-info.server-two-info-image {
  background: url(../img/test.jpg) no-repeat center right;
  height: 224px;
}

.server-info.server-one-info-image {
    background: url(http://wallpaperkick.com/wp-content/uploads/2015/02/gray-wallpaper.jpg) no-repeat center right;
    height:224px;
}
.server-info.server-two-info-image {
    background: url(http://cdn.wonderfulengineering.com/wp-content/uploads/2014/09/red-wallpaper-4.jpg) no-repeat center right;
    height:224px;
}
.server-info.server-three-info-image {
    background: url(http://cdn.wonderfulengineering.com/wp-content/uploads/2014/09/Green-Wallpaper-3.jpg) no-repeat center right;
    height:224px;
}
.server-info.server-four-info-image {
    background: url(http://walldiskpaper.com/wp-content/uploads/2014/11/Blue-Light-Wallpaper-Image-Picture.png) no-repeat center right;
    height:224px;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><scriptsrc="https://code.jquery.com/ui/1.11.0/jquery-ui.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"rel="stylesheet"/><divclass="container server-wrapper"><divclass="col-md-12"><divclass="row"><divclass="col-md-7 server-info"><divclass="server-one-info server-one-info-image"></div><divclass="server-two-info server-two-info-image"></div><divclass="server-three-info server-three-info-image"></div><divclass="server-four-info server-four-info-image"></div></div><divclass="col-md-5 server-titles-wrapper"><divid="display"></div><ulid="server-titles"><liclass="server-one light server ui-widget-content"><h3>Title1</h3></li><liclass="server-two dark server ui-widget-content"><h3>Title2</h3></li><liclass="server-three light server ui-widget-content"><h3>Title3</h3></li><liclass="server-four dark server ui-widget-content"><h3>Title4</h3></li></ul></div></div></div></div>

jsfiddle http://jsfiddle.net/p5gsby49/12/