How to toggle between three divs? Possibly with jquery solution?

Question

I am trying to create a section within a page that you can toggle through different section. I am new to jquery / javascript... =(

I would like the position of the color divs to stay when i toggle through three different sections.

TO BETTER EXPLAIN:

click on subscription(id="subScription") --> red box (id="firstBlock") would appear ////

click on current issue(id="inStore") --> blue box (id="secondBlock") would appear ////

click on Digital Edition("onLine") --> green box (id=thirdBlock") would appear ////

Here is my code snippet:

.line {
    background: none repeat scroll 0 0 #E5E5E5;
    height: 1px;
    position: relative;
    top:10px;
    z-index: 0;
    margin: 0 80px;
}

.midSection .sectionHeader {
    width: 230px;
    margin-bottom: 18px;
}

.sectionHeader{
    background: none repeat scroll 0 0 #ffffff;
    font-size: 20px;
    line-height: 21px;
    margin: 0 auto;
    position: relative;
    text-align: center;
    text-transform: uppercase;
}

.menuLine{
    position: relative;
    text-align: center;
    margin-bottom: 10px;
}

.menuLine div{
    position: relative;
    margin: 10px 0;
}

.menuLine .menu{
    font-family: GillSans,"Gill Sans MT",Calibri,sans-serif;
    padding-left: 20px;
    padding-right: 20px;
    text-transform: uppercase;
    border-right-style: solid;
    border-width: thin;
    border-color: #E5E5E5;
    margin-right: -3px;
    font-size: 13px;
}

.menu {
    display: inline-block;
    zoom: 1;
    vertical-align: top;
    height: 15px;
}

.menuLine .menu#onLine {
    border: none;
}

.middleBlock {
    
    height: 100px;
    padding: 30px 100px;
    background: red;
}

<div class="midSection sections">
  <div class="line"></div>
  <div class="sectionHeader">How to purchase</div>
  <div class="menuLine">
    <div id="subScription" class="menu" style="color:grey;">Subscription</div>
    <div id="inStore" class="menu" style="color: black;">current Issues</div>
    <div id="onLine" class="menu" style="color: black;">Digital Edition</div>
  </div>
  <div id="firstBlock" class="middleBlock">
    <div class="firstBlockContent leftblock">
      <h3>"subscribe"<br>"to blah" </h3>
    </div>

  </div>
  <div id="secondBlock" class="middleBlock" style="background:blue;">
    <div class="secondBlockContent leftblock">
      <h3>"subscribe"<br>"to blah"</h3>
    </div>

  </div>
  <div id="thirdBlock" class="middleBlock" style="background:lightgreen;">
    <div class="secondBlockContent leftblock">
      <h3>"subscribe"<br>"to blah"</h3>
    </div>

  </div>


</div>

score 5 · Accepted Answer · edited Nov 17 '16 at 07:18

Use a function (in my case display()) that toggles the classes.

Something like:

var display = function(block_name, title) { // 'block_name gives block id' and 'title gives title object'
  // Toggle Block
  $('.middleBlock').css('display', 'none'); // make all blocks 'display: none'
  $('#' + block_name + '').css('display', 'block'); // make the block (in arguments) 'display: block'

  // Change Title Color
  $('.menu').removeClass('active'); // remove 'active' class from all titles
  $(title).addClass('active'); // add 'active' class to specific title
}

Have a look at the snippet below:

var display = function(block_name, title) {
  // Toogle Block
  $('.middleBlock').css('display', 'none');
  $('#' + block_name + '').css('display', 'block');

  // Change Title Color
  $('.menu').removeClass('active');
  $(title).addClass('active');
}

$('#subScription').on('click', function() {
  display('firstBlock', $(this));
});

$('#inStore').on('click', function() {
  display('secondBlock', $(this));
});

$('#onLine').on('click', function() {
  display('thirdBlock', $(this));
});

.line {
  background: none repeat scroll 0 0 #E5E5E5;
  height: 1px;
  position: relative;
  top: 10px;
  z-index: 0;
  margin: 0 80px;
}
.midSection .sectionHeader {
  width: 230px;
  margin-bottom: 18px;
}
.sectionHeader {
  background: none repeat scroll 0 0 #ffffff;
  font-size: 20px;
  line-height: 21px;
  margin: 0 auto;
  position: relative;
  text-align: center;
  text-transform: uppercase;
}
.menuLine {
  position: relative;
  text-align: center;
  margin-bottom: 10px;
}
.menuLine div {
  position: relative;
  margin: 10px 0;
}
.menuLine .menu {
  font-family: GillSans, "Gill Sans MT", Calibri, sans-serif;
  padding-left: 20px;
  padding-right: 20px;
  text-transform: uppercase;
  border-right-style: solid;
  border-width: thin;
  border-color: #E5E5E5;
  margin-right: -3px;
  font-size: 13px;
}
.menu {
  display: inline-block;
  zoom: 1;
  vertical-align: top;
  height: 15px;
  cursor: pointer;
}
.menuLine .menu#onLine {
  border: none;
}
.middleBlock {
  display: none;
  height: 100px;
  padding: 30px 100px;
  background: red;
}
#firstBlock {
  display: block;
}
.menu.active {
  color: #999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="midSection sections">
  <div class="line"></div>
  <div class="sectionHeader">How to purchase</div>
  <div class="menuLine">
    <div id="subScription" class="menu active">Subscription</div>
    <div id="inStore" class="menu">current Issues</div>
    <div id="onLine" class="menu">Digital Edition</div>
  </div>
  <div id="firstBlock" class="middleBlock">
    <div class="firstBlockContent leftblock">
      <h3>"subscribe"<br>"to blah"</h3>
    </div>
  </div>
  <div id="secondBlock" class="middleBlock" style="background:blue;">
    <div class="secondBlockContent leftblock">
      <h3>"subscribe"<br>"to blah"</h3>
    </div>
  </div>
  <div id="thirdBlock" class="middleBlock" style="background:lightgreen;">
    <div class="secondBlockContent leftblock">
      <h3>"subscribe"<br>"to blah"</h3>
    </div>
  </div>
</div>

Hope this helps!

how would I approach if I want different section title [Ex) SUBSCRIPTION] to change color on click? — echang, Nov 17 '16 at 06:49
@echang I've updated my answer, please have a look, it should clear your doubts. — Saurav Rastogi, Nov 17 '16 at 07:01
@echang Its my pleasure! Please accept the answer if this really helped you out. — Saurav Rastogi, Nov 17 '16 at 15:06
I am trying to add this javascript into local computer and test it. and i added a path but i dont see any changes. do you know how i should be linking javascript file so i see changes? — echang, Nov 20 '16 at 06:06
@echang This link will help you - http://stackoverflow.com/questions/14106864/linking-jquery-in-html — Saurav Rastogi, Nov 20 '16 at 06:20

score 0 · Answer 2 · answered Nov 17 '16 at 06:41

0

Here is a really simple to understand example in a JDSFiddle

The JavaScript you want looks something like this

$(document).ready(function() {
  $('.middleBlock').hide();
});

$('#subScription').click(function() {
  $('#firstBlock').show();
  $('#secondBlock').hide();
  $('#thirdBlock').hide();
});

$('#inStore').click(function() {
  $('#firstBlock').hide();
  $('#secondBlock').show();
  $('#thirdBlock').hide();
});

$('#onLine').click(function() {
  $('#firstBlock').hide();
  $('#secondBlock').hide();
  $('#thirdBlock').show();
});

You will have to include jQuery in your page.

answered Nov 17 '16 at 06:41

rosendin

611
1
10
18

That looks like too much code for such a simple thing. – J o Nov 17 '16 at 06:42
I like Saurav's answer as it is nice and concise, however this answer just another (more verbose) way to solve the problem. – rosendin Nov 17 '16 at 06:44

score 0 · Answer 3 · answered Nov 17 '16 at 07:24

Made few changes in your HTML to make JS more compact.

Added data-content attribute to menu links that contains the id of its respective content to be shown. Here is the modified HTML snippet:

<div id="subScription" data-content="#firstBlock" class="menu active">Subscription</div>
<div id="inStore" data-content="#secondBlock" class="menu">current Issues</div>
<div id="onLine" data-content="#thirdBlock" class="menu">Digital Edition</div>

jQuery code to toggle the elements:

$(".menuLine .menu").click (function(){
    $(".middleBlock").css('display', 'none');
    var contentObj = $(this).data('content');
    $(contentObj).css('display', 'block');

    // Add Active class
    $(".menuLine .menu").removeClass('active');
    $(this).addClass('active');
});

Add this CSS to change color of active links:

.menuLine .active{color:grey;}

// Added color:black; and removed this from menu's inline style
.menu {
    display: inline-block;
    zoom: 1;
    vertical-align: top;
    height: 15px;
    color: black;
}

Here is the working JS Fiddle link.

How to toggle between three divs? Possibly with jquery solution?

3 Answers3