Utilizing by jquery

by Satheesh Kumar

HTML

<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>

<button id="inline-block">
inline
</button>
<button id="block">
block
</button>
<button id="inline-odd">
odd content
</button>
<button id="inline-even">
even content
</button>
<br><br><br><br>

&#60;div class="box"&#62;<br>
&#60;div class="content"&#62;<br><br>
&#60;div class="one" style="display:<span class="one-text">block</span>"&#62; 1 &#60;/div&#62;
<br><br>
&#60;div class="two" style="display:<span class="two-text">block</span>"&#62; 2 &#60;/div&#62;
<br><br>
&#60;div class="three style="display:<span class="three-text">block</span>"&#62; 3 &#60;/div&#62;
<br>
<br>
&#60;div class="one" style="display:<span class="four-text">block</span>"&#62; 4 &#60;/div&#62;
<br><br>
&#60;div class="two" style="display:<span class="five-text">block</span>"&#62; 5 &#60;/div&#62;
<br><br>
&#60;div class="three style="display:<span class="six-text">block</span>"&#62; 6 &#60;/div&#62;
<br>
<br>
&#60;/div&#62;
<br>
&#60;/div&#62;
<br>
<br>
<br><br>
<div class="box">
<div class="content">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>
<div class="six">6</div>
</div>
</div>

CSS

.content div {
  padding: 20px;
  border: 1px solid gray;
  margin: 5px;
}
[class$=-text] {
  color: green;
  font-size: 20px;
}
.class-change {
  color: green;
  font-size: 20px;

}
.text {
    margin-top: 20px;
    margin-bottom: 20px;
}
.inline-block.box .content div {
  display: inline-block;
}
.inline-odd.box .content div:not(:nth-child(2n+1)) {
display: none;
}
.inline-even.box .content div:not(:nth-child(2n)) {
display: none;
}

JavaScript

$('#inline-block').click(function(){
$('.box').removeClass('inline-odd');
$('.box').removeClass('inline-even');
$('.box').addClass('inline-block');
$('.one-text, .two-text, .three-text, .four-text, .five-text, .six-text').html("inline-block");

});
$('#block').click(function(){
$('.box').removeClass('inline-block');
$('.one-text, .two-text, .three-text, .four-text, .five-text, .six-text').html("block");
});
$('#inline-odd').click(function(){
$('.box').removeClass('inline-even');
$('.box').removeClass('inline-block');
$('.box').addClass('inline-odd');
$('.one-text,  .three-text,  .five-text').html("block");
$('.two-text, .four-text,  .six-text').html("none");
});
$('#inline-even').click(function(){
$('.box').removeClass('inline-odd');
$('.box').removeClass('inline-block');
$('.box').addClass('inline-even');
$('.class-change').html("inline-even");
$('.one-text,  .three-text,  .five-text').html("none");
$('.two-text, .four-text,  .six-text').html("block");
});