Clever Geek Handbook

Need Help Creating a Segmented Control

I am trying to create a segmented control to help organize content on my website. So far I have a segmented control created and looking like I want to use 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 have. You will also notice a series of div tags, the text of which specifies which tags should be displayed when each segment in the control is selected. I'm sure JavaScript will be the easiest solution to this problem, but as I said, I'm not familiar with the language enough to find a good solution here. Any help you can provide in extending this segmented control so that I can use it to show and hide various div tags based on the active segment to be selected would be greatly appreciated.

Here is the HTML I have:

<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 are the various div tags that should be displayed when a segment inside the control is selected. Obviously, they all appear right below the segmented control right now, and nothing happens to any of those divs when a new segment is selected. This is what JavaScript needs 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 is 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 in advance for your help!

+3


source to share


3 answers


You can just store the state of the checkboxes in variables and hide the div based on those variables.

The first variables included below are used when the page loads, and the others when the object changes.



Take a look 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();
    }
});
+1


source


here's 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>
Run code


0


source


Have a look at the jsfiddle , this is a html + css solution. But this requires placing your div with content inside their respective segment controls, e.g .:

<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>

as well as some additional css.

0


source






More articles:


All Articles