Grid mode with DOM

Grid mode with DOM

by Adi Jaya

HTML

<p>
<button class="btn active" id="col-1" disabled>1 Coloumn</button>
<button class="btn" id="col-2">2 Coloumn</button>
<button class="btn" id="col-3">3 Coloumn</button>
</p>


<article class="article">
<div class="article pad-10 bg1">
  <h2>Heading 2</h2>
  <div class="snippet">
  Lorem ipsum dolor sit amet, sensibus prodesset ius an, zril postea tibique cu est.....  
  </div>
  <div class="more"><a href="#">Read More...</a></div>
</div>
</article>


<article class="article">
<div class="article pad-10 bg2">
  <h2>Heading 2</h2>
  <div class="snippet">
  Lorem ipsum dolor sit amet, sensibus prodesset ius an, zril postea tibique cu est.....  
  </div>
  <div class="more"><a href="#">Read More...</a></div>
</div>
</article>

<article class="article">
<div class="article pad-10 bg1">
  <h2>Heading 2</h2>
  <div class="snippet">
  Lorem ipsum dolor sit amet, sensibus prodesset ius an, zril postea tibique cu est.....  
  </div>
  <div class="more"><a href="#">Read More...</a></div>
</div>
</article>

<article class="article">
<div class="article pad-10 bg2">
  <h2>Heading 2</h2>
  <div class="snippet">
  Lorem ipsum dolor sit amet, sensibus prodesset ius an, zril postea tibique cu est.....  
  </div>
  <div class="more"><a href="#">Read More...</a></div>
</div>
</article>

<article class="article">
<div class="article pad-10 bg1">
  <h2>Heading 2</h2>
  <div class="snippet">
  Lorem ipsum dolor sit amet, sensibus prodesset ius an, zril postea tibique cu est.....  
  </div>
  <div class="more"><a href="#">Read More...</a></div>
</div>
</article>

<article class="article">
<div class="article pad-10 bg2">
  <h2>Heading 2</h2>
  <div class="snippet">
  Lorem ipsum dolor sit amet, sensibus prodesset ius an, zril postea tibique cu est.....  
  </div>
  <div class="more"><a href="#">Read More...</a></div>
</div>
</article>

<article class="article">
<div class="article pad-10 bg1">
  <h2>Heading 2</h2>
  <div class="snippet">
  Lorem ipsum dolor sit amet, sensibus...

SCSS

body {
    display: block;
    margin: 15px;
    font-family: sans-serif;
}

.pad-10 {
  padding : 15px;
  margin : 10px;
}

.col-2{
  width : 50%;
  float : left;
}

.col-3{
  width : 33.333333%;
  float : left;
}
article {
    -webkit-transition-duration: 3s; /* Safari */
    transition-duration: 3s;
}

.bg1 {
    background: #faffd4;
}

.bg2 {
    background: #c9ddff;
}
h2 {
    margin-top: 0;
    margin-bottom: 5px;
}
.snippet {
    padding: 10px 0;
}
.more {
    text-align: right;
}

button.active {
  color : red;
}
button {
  cursor : pointer;
}
button:disabled {
  cursor : no-drop;
}

JavaScript

//jquery
$(function () {
	var a = $('article'),
  		b = 'col-2 col-3';
      
	$('.btn').click(function() {
		$('.btn').prop('disabled',false).removeClass('active');
    $(this).prop('disabled',true).addClass('active');
	});
  
	$('#col-1').click(function() {
		a.removeClass(b);
	});

	$('#col-2').click(function() {
		a.removeClass(b).addClass('col-2');
	});
  
	$('#col-3').click(function() {
		a.removeClass(b).addClass('col-3');
	});  
  
});