JSFiddle - React, Tailwind, and code Playground

by imiguelsalcedo

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.jqueryscript.net/demo/jQuery-Plugin-To-Create-iOS-Style-Segmented-Controls-Segment-js/segment.js"></script>

<select class="segment-select">
  <option value="monthly">Monthly</option>
  <option value="yearly">Yearly</option>
</select>
<div class='contentTable'>
   <div class="content">
        <span class="price"></span> 
        <span class="interval"></span>
        <a class='link' href="#">Sign Up</a>
    </div>
    <div class="content">
        <span class="price"></span>
        <span class="interval"></span>
        <a class='link' href="#">Sign Up</a>
    </div> 
</div>

JavaScript

$(".segment-select").Segment();

var options = {
	monthly: [
        {price: 25, link: 'link1'},
        {price: 45, link: 'link2'},
    ],
    yearly: [
        {price: 300, link: 'link3'},
        {price: 540, link: 'link4'},
    ]
}

function fillContent(interval) {
    var data = options[interval];
    
	$('.content').each(function(index) {
    	var content = $(this);
        
        content.find('.price').text('$' + data[index].price);
        content.find('.interval').text(interval);
        content.find('.link').attr('href', data[index].link);
    });
}

// initialization 

fillContent("monthly");

$('.ui-segment').on("click", '.option', function() {
	var interval = $(this).attr('value');
    
    fillContent(interval);
});