Need Help Creating A Segmented Control

Question

I'm trying to create a segmented control to help organize content on my website. So far, I've got the segmented control created and looking the way I want using HTML and CSS. Now, I would like to expand the functionality of this control to show / hide a series of div tags when each segment is selected. However, JavaScript is definitely not my forte, and I haven't been able to find a good, responsive solution to this problem.

Below is the code I've got so far. You'll also notice a series of div tags whose text indicates which tags should be shown when each segment in the control is selected. I'm pretty sure JavaScript would be the easiest solution to this problem, but as I said, I'm not familiar enough with that language to come up with a good solution here. Any help you can provide on expanding this segmented control so I can use it to show and hide different div tags based on the active segment that is selected would be greatly appreciated.

Here's the HTML I've got:

<ul class="segmented-control">
<li class="segmented-control__item">
    <input class="segmented-control__input" type="radio" value="1" name="option" id="option-1" checked>
    <label class="segmented-control__label" for="option-1">Step 1</label>
</li>

<li class="segmented-control__item">
    <input class="segmented-control__input" type="radio" value="2" name="option" id="option-2" >
    <label class="segmented-control__label" for="option-2">Step 2</label>
</li>

<li class="segmented-control__item">
    <input class="segmented-control__input" type="radio" value="3" name="option" id="option-3" >
    <label class="segmented-control__label" for="option-3">Step 3</label>
</li>
</ul>

Here's the various div tags that should be displayed when a segment within the control is selected. Obviously they are all displaying right under the segmented control right now, and nothing happens to any of these div tags when a new segment is selected. This is what the JavaScript would need to do :)

<div class="Step_1_Content" align="center">

  <p>This is the content that should be displayed when the Step 1 segment has been selected</p>

</div>

<div class="Step_2_Content" align="center">

  <p>This is the content that should be displayed when the Step 2 segment has been selected</p>

</div>

<div class="Step_3_Content" align="center">

  <p>This is the content that should be displayed when the Step 3 segment has been selected</p>

</div>

And here's the CSS I'm using for the Segmented Control:

<style>

  .segmented-control {
  display: table;
  width: 100%;
  margin: 2em 0;
  padding: 0;
  }

  .segmented-control__item {
  display: table-cell;
  margin: 0;
  padding: 0;
  list-style-type: none;
  }

  .segmented-control__input {
  position: absolute;
  visibility: hidden;
  }

  .segmented-control__label {
  display: block;
  margin: 0 -1px -1px 0; /* -1px margin removes double-thickness borders between items */
  padding: 1em .25em;
  border: 1px solid #E62033;
  color: #E62033;
  font: 14px/1.5 sans-serif; 
  text-align: center;  
  cursor: pointer;
  }


  .segmented-control__label:hover {
  background: #ffffff;
  color: #E62033;
  }

  .segmented-control__input:checked + .segmented-control__label {
  background: #E62033;
  color: #ffffff; 
  }

</style>

Once again, thanks in advance for your help!

Answer 1

Look this jsfiddle, it's html+css only solution. But this one requires a placement of your div's with content inside of appropriate segment control li elements, like this:

<li class="segmented-control__item">
    <input id="option-1" ...>
    <label class="segmented-..." for="option-1">Step 1</label>
    <div class="Step_1...">
       <p>some content...</p>
    </div>
</li>

and also some additional css.

Answer 2

here the code:

$( document ).ready(function() {

    // load initial state
    hideContent();    
    $(".step1").show();
    
  // click on li-element
  $( "li" ).on( "click", function()  {
      var li = $(this);

      // find the content number
      var number = li.find("input").attr("value");
      
      hideContent();      
      showContent(number) ;
      
    });
    
});

function hideContent() {
    $(".content").hide();
}

function showContent(number) {
    $(".content.step"+number).show(); 
}

  .segmented-control {
  display: table;
  width: 100%;
  margin: 2em 0;
  padding: 0;
  }

  .segmented-control__item {
  display: table-cell;
  margin: 0;
  padding: 0;
  list-style-type: none;
  }

  .segmented-control__input {
  position: absolute;
  visibility: hidden;
  }

  .segmented-control__label {
  display: block;
  margin: 0 -1px -1px 0; /* -1px margin removes double-thickness borders between items */
  padding: 1em .25em;
  border: 1px solid #E62033;
  color: #E62033;
  font: 14px/1.5 sans-serif; 
  text-align: center;  
  cursor: pointer;
  }


  .segmented-control__label:hover {
  background: #ffffff;
  color: #E62033;
  }

  .segmented-control__input:checked + .segmented-control__label {
  background: #E62033;
  color: #ffffff; 
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<ul class="segmented-control">
<li class="segmented-control__item">
    <input class="segmented-control__input" type="radio" value="1" name="option" id="option-1" checked="checked">
    <label class="segmented-control__label" for="option-1">Step 1</label>
</li>

<li class="segmented-control__item">
    <input class="segmented-control__input" type="radio" value="2" name="option" id="option-2" >
    <label class="segmented-control__label" for="option-2">Step 2</label>
</li>

<li class="segmented-control__item">
    <input class="segmented-control__input" type="radio" value="3" name="option" id="option-3" >
    <label class="segmented-control__label" for="option-3">Step 3</label>
</li>
</ul>
    
    <div class="step1 content" align="center">

  <p>This is the content that should be displayed when the Step 1 segment has been selected</p>

</div>

<div class="content step2" align="center">

  <p>This is the content that should be displayed when the Step 2 segment has been selected</p>

</div>

<div class="content step3" align="center">

  <p>This is the content that should be displayed when the Step 3 segment has been selected</p>

</div>

Answer 3

You can simply store the state of the checkboxes in variables, and hide the divs based on those variables.

The first variables I included below are used on page load, the other ones when the object has changed.

Check it out here: https://jsfiddle.net/ezfy66f9/

var checked1 = $('#option-1').is(':checked');
var checked2 = $('#option-2').is(':checked');
var checked3 = $('#option-3').is(':checked');

if (checked1 == 1) {
    $('.Step_1_Content').show();
    $('.Step_2_Content').hide();
    $('.Step_3_Content').hide();
} else if (checked2 == 1) {
    $('.Step_2_Content').show();
    $('.Step_1_Content').hide();
    $('.Step_3_Content').hide();
} else if (checked3 == 1) {
    $('.Step_3_Content').show();
    $('.Step_1_Content').hide();
    $('.Step_2_Content').hide();
}

$(".segmented-control").change(function () {
    var checked1 = $('#option-1').is(':checked');
    var checked2 = $('#option-2').is(':checked');
    var checked3 = $('#option-3').is(':checked');

    if (checked1 == 1) {
        $('.Step_1_Content').show();
        $('.Step_2_Content').hide();
        $('.Step_3_Content').hide();
    } else if (checked2 == 1) {
        $('.Step_2_Content').show();
        $('.Step_1_Content').hide();
        $('.Step_3_Content').hide();
    } else if (checked3 == 1) {
        $('.Step_3_Content').show();
        $('.Step_1_Content').hide();
        $('.Step_2_Content').hide();
    }
});