can this jquery code be simplified?

akuzaid93

New Member
Reaction score
3
Code:
$(document).ready(function(){
$(".showpost").css({"color":"#333333","background":"#ffffff"});
$(".showpost").click(function(){
  $(".posts").fadeIn();
  $(".about").css({"display":"none"});
  $(".message").css({"display":"none"});
  $(".buddies").css({"display":"none"});
  $(this).css({"color":"#333333","background":"#ffffff"});
  $(".showabout").css({"color":"#ffffff","background":"#333333"});
  $(".showmessage").css({"color":"#ffffff","background":"#333333"});
  $(".showbuddies").css({"color":"#ffffff","background":"#333333"});
});
$(".showabout").click(function(){
  $(".about").fadeIn();
  $(".posts").css({"display":"none"});
  $(".message").css({"display":"none"});
  $(".buddies").css({"display":"none"});
  $(".showpost").css({"color":"#ffffff","background":"#333333"});
  $(this).css({"color":"#333333","background":"#ffffff"});
  $(".showmessage").css({"color":"#ffffff","background":"#333333"});
  $(".showbuddies").css({"color":"#ffffff","background":"#333333"});
});
$(".showmessage").click(function(){
  $(".message").fadeIn();
  $(".posts").css({"display":"none"});
  $(".about").css({"display":"none"});
  $(".buddies").css({"display":"none"});
  $(".showpost").css({"color":"#ffffff","background":"#333333"});
  $(".showabout").css({"color":"#ffffff","background":"#333333"});
  $(this).css({"color":"#333333","background":"#ffffff"});
  $(".showbuddies").css({"color":"#ffffff","background":"#333333"});
});
$(".showbuddies").click(function(){
  $(".buddies").fadeIn();
  $(".posts").css({"display":"none"});
  $(".about").css({"display":"none"});
  $(".message").css({"display":"none"});
  $(".showpost").css({"color":"#ffffff","background":"#333333"});
  $(".showabout").css({"color":"#ffffff","background":"#333333"});
  $(".showmessage").css({"color":"#ffffff","background":"#333333"});
  $(this).css({"color":"#333333","background":"#ffffff"});
});
});
 

Artificial

Without Intelligence
Reaction score
326
I would do something like this:
Code:
.showpost,
.showabout,
.showmessage,
.showbuddies {
    color: #fff;
    background-color: #333;
}

.selected-button {
    color: #333;
    background-color: #fff;
}

.posts,
.about,
.message,
.buddies {
    display: none;
}

Code:
$(document).ready(function () {
    var selected = $('.posts'),
         selectedButton = $('.showpost');

    function clickListener(button, target) {
        button.click(function () {
            selected.hide();
            selected = target;
            selected.fadeIn();

            selectedButton.remove class selected-button;
            selectedButton = button;
            selectedButton.add class selected-button
        });
    }

    clickListener(selectedButton, selected);
    clickListener($('.showabout'), $('.about'));
    ...
});
The code isn't quite complete, but it should give you an idea of what I'm after. :p
 

Magentix

if (OP.statement == false) postCount++;
Reaction score
107
Code:
$(function(){
  $(".clickables").children('li').click(function() {
    var that = $(this)
    
    $('.showables').children('div').hide();
    $('.' + that.attr('class').substr(5)).fadeIn();
    
    $(".clickables").children('li').css({"color":"#ffffff","background":"#333333"});
    that.css({"color":"#333333","background":"#ffffff"});
  });
  
  $('.showposts').click();
});

  • This assumes your clickables are list items, nested in an unordered list with the class name 'clickables'
  • This assumes your showables are divs, nested in another div with the class name 'showables'
  • This assumes you give your clickables the classname: 'show' + class name of showable

Edit:
As suggested above, use CSS classes for your manipulations and then use .addClass and .removeClass (or .toggleClass)
http://api.jquery.com/category/manipulation/class-attribute/
 
General chit-chat
Help Users
  • No one is chatting at the moment.

      The Helper Discord

      Members online

      No members online now.

      Affiliates

      Hive Workshop NUON Dome World Editor Tutorials

      Network Sponsors

      Apex Steel Pipe - Buys and sells Steel Pipe.
      Top