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-wrapper ul {
  list-style: none;
  padding-left: 0;
}
/* line 429, ../sass/home.scss */
.server-titles-wrapper .server > h3 {
  color: white;
  margin: 0;
  padding: 15px 0 15px 15px;
}
/* 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-info p {
  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-info button {
  background: #f4dab9;
  border-radius: 5px;
  margin: 10px 0 0 10px;
}
/* line 469, ../sass/home.scss */
.server-info button a {
  color: #946d3b;
  font-family: Open-Sans, Trebuchet MS, Serif;
  padding: 4px 8px;
  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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src="https://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js">
</script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container server-wrapper">
    <div class="col-md-12">
        <div class="row">
            <div class="col-md-7 server-info">
                <div class="server-one-info server-one-info-image"></div>
                <div class="server-two-info server-two-info-image"></div>
                <div class="server-three-info server-three-info-image"></div>
                <div class="server-four-info server-four-info-image"></div>
            </div>
            <div class="col-md-5 server-titles-wrapper">
                <div id="display"></div>
                <ul id="server-titles">
                    <li class="server-one light server ui-widget-content">
                        <h3>Title1</h3>
                    </li>
                    <li class="server-two dark server ui-widget-content">
                        <h3>Title2</h3>
                    </li>
                    <li class="server-three light server ui-widget-content">
                        <h3>Title3</h3>
                    </li>
                    <li class="server-four dark server ui-widget-content">
                        <h3>Title4</h3>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

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