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'm having some trouble with jQueryUI's .selectable, I have created a Selectable with four different tabs, each tab displays different content added to it (a class for image, an append for a button and an append for paragraph text).
Here is a visual look at what I'm trying to achieve: http://puu.sh/gELQi/211165f55a.png
My Problem
Currently, when clicking on one tab it will correctly display the contents of that tab, however as soon as you click to a different/same tab again it will:
Add the contents overlapping the previous tab
What I need
I need a way so that on every tab click (same or other tab) it will clear all previous contents of the last tab (any buttons/paragraphs/image classes).
Also, one other problem with the jQueryUI .selectable() is that it allows selecting multiple tabs at once, if you drag your cursor over the tabs in my JSFiddle you'll see what I mean, I only want it to be able to select one at max.
My code broken down
jQuery
//Tab Content added in relation to tab number
if ($('#elements .elementOne').hasClass('ui-selected')) {
// Tab 1
$(".elementOneInfo").addClass("elementOneInfoImage");
$(".elementOneInfo").append("<button><a href='/clans'>MORE<two</button>");
$(".elementOneInfo").append("<p>"+textOne+"</p>");
}
if ($('#elements .elementTwo').hasClass('ui-selected')) {
//Tab 2 etc.
$(".elementTwoInfo").addClass("elementTwoInfoImage");
[...]
HTML
<div class="container elements-wrapper">
<div class="col-md-12">
<div class="row">
<!-- Where new content is added -->
<div class="col-md-7 elements-info">
<div class="elementOneInfo"></div>
<div class="elementTwoInfo"></div>
<div class="elementThreeInfo"></div>
<div class="elementFourInfo"></div>
</div>
<!-- Where tabs exist -->
<div class="col-md-5 elements-titles-wrapper">
<ul id="elements">
<li class="elementOne light ui-widget-content"><h3>Title1</h3></li>
<li class="elementTwo dark ui-widget-content"><h3>Title2</h3></li>
<li class="elementThree light ui-widget-content"><h3>Title3</h3></li>
<li class="elementFour dark ui-widget-content"><h3>Title4</h3></li>
</ul>
</div>
</div>
</div>
</div>
SCSS
/* Tabs */
.elements-titles-wrapper {
padding:0;
ul {
list-style: none;
padding-left: 0;
}
li > h3 {
color: white;
margin:0;
padding: 15px 0 15px 15px;
}
.light {
background-color: $aqua;
}
.dark {
background-color: $dark_aqua;
}
.active {
background-color: #75c5e0;
}
.ui-selected {
background: $light_aqua;
}
.ui-selecting {
background: $light_aqua;
}
}
/* Tab Content Added */
.elements-info {
padding:0;
p {
color:white;
font-size:12px;
background: rgba(0,0,0,.5);
padding: 10px;
position:absolute;
bottom:0;
margin-bottom: 0;
@include font(Open-Sans);
}
button {
background: $cream;
border-radius:5px;
margin: 5px 0 0 5px;
a {
color:$brown;
@include font(Open-Sans);
padding: 4px 8px;
text-decoration: none;
}
}
/* Random Background Images for testing */
.elementOneInfoImage {
background: url(http://wallpaperkick.com/wp-content/uploads/2015/02/gray-wallpaper.jpg) no-repeat center right;
height:224px;
}
.elementTwoInfoImage {
background: url(http://cdn.wonderfulengineering.com/wp-content/uploads/2014/09/red-wallpaper-4.jpg) no-repeat center right;
height:224px;
}
.elementThreeInfoImage {
background: url(http://cdn.wonderfulengineering.com/wp-content/uploads/2014/09/Green-Wallpaper-3.jpg) no-repeat center right;
height:224px;
}
.elementFourInfoImage {
background: url(http://walldiskpaper.com/wp-content/uploads/2014/11/Blue-Light-Wallpaper-Image-Picture.png) no-repeat center right;
height:224px;
}
}
Thanks for reading, I hope someone may be able to enlighten me on how this could be achieved, I have been able to add the look and feel of the visual image I sent with one tab but as soon as soon as I added the switching of tabs into the mix it just didn't work.
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/