CODEWITHSUNDEEP
jqueryhtmlcss
user2598957
user2598957

Reputation: 263

Adding div to jquery filter

I'm new to Jquery & I'm over the moon that I have been able to create the following filter for my website, what I want to do next is when someone clicks an option e.g photoshop, how can I then apply the following div - 

<span id="all" class="label label-primary">photoshop</span>

Then if they click another option such as all I need to remove that div from photoshop and put it on all.

$("#all").click(function(){
    $(".webdesign").show();
    $(".photoshop").show();
    $(".games").show();
})
$("#webdesign").click(function(){
    $(".webd").show();
    $(".photoshop").hide();
    $(".games").hide();
})
$("#photoshop").click(function(){
    $(".webd").hide();
    $(".photoshop").show();
    $(".games").hide();
})
$("#games").click(function(){
    $(".webd").hide();
    $(".photoshop").hide();
    $(".games").show();
})

Upvotes: 1

Views: 126

Answers (3)

Graham Walters
Graham Walters

Reputation: 2064

Here's a jsfiddle

Here's the HTML

<div class="labels">
  <span id="all" class="label active">All</span>
  <span id="photoshop" class="label">Photoshop</span>
  <span id="games" class="label">Games</span>
</div>

<div id="container">
  <div class="photoshop"></div>
  <div class="games"></div>
  <div class="photoshop"></div>
  <div class="games"></div>
  <div class="photoshop"></div>
  <div class="games"></div>
</div>

The CSS

.label.active {
  background-color: #4EB478;
  font-size: 14px;
  color: #fff;
}

.label {
  cursor: pointer;
  display: inline-block;
  padding: .25em .6em;
  font-weight: 500;
  line-height: 1;
  color: #4EB478;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25em;
  margin-bottom: 10px;
}

.container {
  display: block;
}

.photoshop {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: #321;
}

.games {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: #789;
}

And the JavaScript

$("#all").click(function(){
  $("#container div").show();
})
$("#webdesign").click(function(){
  $(this).siblings().removeClass("active");
  $(this).addClass('active');
  $("#container div").hide();
  $('.webd').show();
})
$("#photoshop").click(function(){
  $(this).siblings().removeClass("active");
  $(this).addClass('active');
  $("#container div").hide();
  $('.photoshop').show();
})
$("#games").click(function(){
  $(this).siblings().removeClass("active");
  $(this).addClass('active');
  $("#container div").hide();
  $('.games').show();
})

Upvotes: 1

xec
xec

Reputation: 18024

If all you're missing is the highlight, you can try something like this (merged into what you got)

$(".filter > li").click(function(){
    $(this).siblings().removeClass("active");
    $(this).addClass("active");
});

Adding to @Graham's demo, it would be something like this: http://jsfiddle.net/38sYd/1/

Upvotes: 1

steo
steo

Reputation: 4656

Depends on how do you want to place you span. You can do either way: 

var html = "<span id="all" class="label label-primary">photoshop</span>";
$("#someid").on('click', function(){
 //stuff
 $(this).append(html);
 //or
 //$(html).insertAfter($(this));
});

if you want to remove use 

$("#someid").on('click',function(){
 if($("#all").length > 1){ //lets check if the span exist 
   $("#all").remove();
 }
//then append or insertafter
});

Upvotes: 0

Related Questions