How to Toggle Switch - Prices and Config? [closed]

Question

Closed. This question needs details or clarity. It is not currently accepting answers.

---

Want to improve this question? Add details and clarify the problem by editing this post.

Closed 9 years ago.

Improve this question

Need your help:

according to http://ghinda.net/css-toggle-switch/ you can use switch. After reading (as i'am not an full expert) how can I change my price according to definition:

     <div class="switch-toggle switch-5 switch-candy yellow">
      <input id="alusa" name="view" type="radio" checked>
      <label for="alusa" onclick="">USA</label>

      <input id="aluk" name="view" type="radio">
      <label for="aluk" onclick="">UK</label>

      <input id="alin" name="view" type="radio">
      <label for="alin" onclick="">India</label>

      <input id="altr" name="view" type="radio">
      <label for="altr" onclick="">Turquia</label>

      <input id="alhk" name="view" type="radio">
      <label for="alhk" onclick="">Hong-Kong</label>

      <a class="btn btn-primary"></a>
    </div>

            <div class="title">Economy</div>
            <div id="alusa" onclick="" checked class="price">$3.99 <i>/ per month</i></div>
            <div id="aluk" onclick="" class="price">$6.99 <i>/ per month</i></div>
            <div id="alin" onclick="" class="price">$6.99 <i>/ per month</i></div>
            <div id="altr" onclick="" class="price">$6.99 <i>/ per month</i></div>
            <div id="alhk" onclick="" class="price">$6.99 <i>/ per month</i></div>

How can I change price and configs accord the toggle selected?

Thank you :)

Answer 1

I removed the IDs from the price DIVs, to get rid of duplicate IDs. I moved these IDs into the class, so that the same class can be used in prices for different products.. Then I used jQuery to show only the prices whose class matches the currently selected radio button's ID.

HTML:

         <div class="switch-toggle switch-5 switch-candy">
          <input id="alusa" name="view" type="radio" checked>
          <label for="alusa" onclick="">USA</label>

          <input id="aluk" name="view" type="radio">
          <label for="aluk" onclick="">UK</label>

          <input id="alin" name="view" type="radio">
          <label for="alin" onclick="">India</label>

          <input id="altr" name="view" type="radio">
          <label for="altr" onclick="">Turquia</label>

          <input id="alhk" name="view" type="radio">
          <label for="alhk" onclick="">Hong-Kong</label>

          <a class="btn btn-primary"></a>
        </div>

          <div class="clearfix mar_top3"></div>

             <div class="pricing-tables-two">
                <div class="title">Economy</div>
                <div class="price alusa">$3.99 <i>/ per month</i></div>
                <div class="price aluk">$6.99 <i>/ per month</i></div>
                <div class="cont-list">


                        <ul>
                        <li>Unlimited Bandwidth</li>
                        <li>100 GB Space</li>
                        <li>10 Databases</li>
                        <li>Ad Credits</li>
                        <li>1 Free Domain</li>
                        <li>24/7 Unlimited Support</li>
                        <li class="last">100 Email Addresses</li>
                    </ul>
                </div>
                <div class="ordernow"><a href="#" class="button darkgray small align">Order Now</a></div>
            </div><!-- end section -->

JS:

$(function() {
    $(".price:not(.alusa)").hide();
    $(":radio[name=view]").change(function() {
        $(".price").hide();
        $(".price." + this.id).show();
    });
});

Updated fiddle