jquery navigation plug-in to show content [closed]

Question

I'm somewhat new to JavaScript / jQuery. I wrote this "plug-in", and it seems to do what I want. But I know what I've done is a bit clunky and inelegant.

The idea is that I have multiple columns of images, each column with a title. When you click on a column title, only that column of images shows. All the other columns disappear. And the selected column converts to a horizontal row. When the "all" button is clicked, the opposite happens. The selected horizontal row returns to being a column and all the others reappear.

I was hoping someone could show me a better way to write this.

The HTML is as follows:

<div class="row">
  <div class="multi-show">
    <div class="test-link">
      <a href="#"><h4>Commercial</h4></a>
    </div>
    <div class="content-thumbs">
      <div>
        <div class="thumb">
          <img class="w-100 img-thumbnail" src="pix/place-holder-1.gif" alt="">
        </div>
        <div class="thumb">
          <img class="w-100 img-thumbnail" src="pix/place-holder-1.gif" alt="">
        </div>
        <div class="thumb">
          <img class="w-100 img-thumbnail" src="pix/place-holder-1.gif" alt="">
        </div>
        <div class="thumb">
          <img class="w-100 img-thumbnail" src="pix/place-holder-1.gif" alt="">
        </div>
      </div>
    </div>
  </div>
  <div class="multi-show">
    <div class="test-link">
      <a href="#"><h4>Hospitality</h4></a>
    </div>
    <div class="content-thumbs">
      <div class="thumb">
        <img class="w-100 img-thumbnail" src="pix/place-holder-2.gif" alt="">
      </div>
      <div class="thumb">
        <img class="w-100 img-thumbnail" src="pix/place-holder-2.gif" alt="">
      </div>
      <div class="thumb">
        <img class="w-100 img-thumbnail" src="pix/place-holder-2.gif" alt="">
      </div>
      <div class="thumb">
        <img class="w-100 img-thumbnail" src="pix/place-holder-2.gif" alt="">
      </div>
    </div>
   </div>
</div>

The CSS is:

.multi-show {
  position: relative;
  width: 183px;
  height: 530px;
  float: left;
}

.single-show{
  position: absolute;
  width: 1200px;
  height: 237px;
  overflow: visible;
}

.test-link {
  z-index: 10;
}

.thumb {
  margin-bottom: 10px;
}

.thumb img {
  border: none;
}

.img-thumbnail {
  background-color: unset;
}

.content-thumbs {
  position: relative;
  height: 530px;
  margin-top: 10px;
  overflow-x: hidden;
  overflow-y: scroll;
}

The original jquery was this:

$( document ).ready(function() {
  $( ".test-link" ).on("click", function() {
    var target = $(this).parent();
    var pos = target.offset();
    $(".thumbs-col").hide();
    target.show();
    target.css({
      "background-color": "green",
      "position": "absolute",
      "left": pos,
      "width": "1200px",
      "height": "237px",
      "overflow": "visible"
    });
    $(".content-thumbs .thumb").css({
      "float": "left"
    });
  });
  $( "#all" ).on("click", function() {
    (".content-thumbs .thumb").css({
      "float": "none"
    });
    console.log("good");
  });
});

I've since changed it with some guidance (Thanks) to writing some external CSS styles and dynamically changing the classes. Like this:

$( document ).ready(function() {
  var target;
  $( ".test-link" ).on("click", function() {
    target = $(this).parent();
    $(".multi-show").hide();
    target.show();
    target.removeClass("multi-show");
    target.addClass("single-show");
    $(".content-thumbs .thumb").css({
      "float": "left"
    });
  });
  $( "#all" ).on("click", function() {
    target.removeClass("single-show");
    target.addClass("multi-show");
    $(".content-thumbs .thumb").css({
      "float": "none"
    });
    $(".multi-show").show();
      console.log("good");
    });
  });
});

I'm guessing there is still a better way.

Answer 1

My Biggest callouts are going to be modifying css with JQuery instead of just using predefined classes. Modifying css with JQuery is very expensive, adding and removing classes is very cheap in comparison. It also will tidy up your JS a little. You can see my comment in line.

JS

$( document ).ready(function(){
  $( ".test-link" ).on("click", function({target}){  //The param `event` is passed to this function by default, if you are using es6 you can deconstruct `event` like so `{target}`
    /* var target = $(this).parent(); */ //you can read this from the event passed in on 'click' unless you are really looking for the parent, in which case I would expect it to be hidden and question how you are able to see it...
    //var pos = target.offset(); //you should be able to calculate this without js in css
    $(".thumbs-col").hide();
    target.show();
    /*target.css({
      "background-color": "green",
      "position": "absolute",
      "left": pos,
      "width": "1200px",
      "height": "237px",
      "overflow": "visible"
    });*/ // You are hiding and showing target, set the css through css instead of modifying it with JQuery
    /*$(".thumb").css({
      "float": "left"
    });*/ // instead of using JQuery css, you define a class with css and add/remove it with JQuery (https://api.jquery.com/addclass/)
    $(".thumb").addClass('active');
  });
  $( ".all" ).on("click", function() {
    /*$(".thumb").css({
      "float": "none"
    });*/ //instaed of using JQuery css, you can remove the `active` class that you added as show above
    $(".thumb").removeClass('active');
  });
});

CSS

    .parent-of-test-link { //looks like you were trying to attach this css to the parent of test-link
      background-color: green;
      position: absolute;
      left: 0; //if the parent is set to absolute as well I think you should be able to set this to 0. Otherwise you can look at using `relative`
      width: 1200px;
      height: 237px;
      overflow: visible;
    }

    .thumb.active {
       float: left;
    }

Note It is a little difficult to see exactly what you are trying to modify with the limited code you have provided, so some of the changes may need to be adjusted based on your implementation.

Animations

I would recommend doing animation in css as well and adding and removing classes as suggested above. Heres some docs on animation with css (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations)

Using a combination of your example and theirs...

CSS

thumb.active {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
     margin-left: 100%;
     width: 300%; 
  }

  to {
     margin-left: 0%;
     width: 100%;
  }
}

JSFiddle http://jsfiddle.net/xcb6hadL/