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 current jQuery = http://jsfiddle.net/p5gsby49/8/
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
- Button is added on every new click of same or other tab
- New image class is added and pushed below the previous tab
- Paragraph text overlaps
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.
