I am creating a little template for my website but getting an error i think so in jquery actually i want to repeat the price terms toggle option multiple times on a single page e.g. 1 month 6 months 12 months term. All is ok but on 2nd tab when i select any option it comes the first group moves and merge into the second group i tried to find out but nothing works for me Here is the example og the error. Kindly help me in this

Here is my code

JS

      <script type="text/javascript">
$(document).ready(function() {
    $("div.desc").hide();
    $("div.shared-page-tables-4colmns-button").show();
    $("input[name$='sharedprices']").click(function() {
        var test = $(this).val();
        $("div.desc").hide();
        $("#initial").hide();
        $("#" + test).show();
    });
});
</script> 

HTML

<div class="shared-price-change-main">
                            <ul>
                            <li><input type="radio" name="sharedprices" value="basicterm1"  /> 1 Month <b>$1.99</b>/mo</li>
                            <li><input type="radio" name="sharedprices" value="basicterm2" / 1 /> 6 Months <b>$1.99</b>/mo</li>
                            <li><input type="radio" name="sharedprices" value="basicterm3" / 1 /> 12 Months <b>$1.99</b>/mo</li>
                            </ul>
                        </div>
                                                  <div id="myRadioGroup" class="shareddetailsplan">
                                    <div id="basicterm1" class="desc">
                                    <label>You Save 0</label>
                                    <div class="shared-page-tables-4colmns-button"><a href="http://google.com">Order Now</a></div>
                                    </div>
                                    <div id="basicterm2" class="desc">
                                    <label>You Save 5%</label>
                                    <div class="shared-page-tables-4colmns-button"><a href="http://msn.com">Order Now</a></div>
                                    </div>
                                    <div id="basicterm3" class="desc">
                                    <label>You Save 10%</label>
                                    <div class="shared-page-tables-4colmns-button"><a href="http://msn.com">Order Now</a></div>
                                    </div>
                                    <div class="shared-page-tables-4colmns-button" id="initial"><label>You Save $0</label><a href="#">Order Now</a></div>
                        </div>





<div class="shared-price-change-main">
                            <ul>
                            <li><input type="radio" name="sharedprices" value="standardterm1"  /> 1 Month <b>$1.99</b>/mo</li>
                            <li><input type="radio" name="sharedprices" value="standardterm2" / 1 /> 6 Months <b>$1.99</b>/mo</li>
                            <li><input type="radio" name="sharedprices" value="standardterm3" / 1 /> 12 Months <b>$1.99</b>/mo</li>
                            </ul>
                        </div>
                                                  <div id="myRadioGroup" class="shareddetailsplan">
                                    <div id="standardterm1" class="desc">
                                    <label>You Save 0</label>
                                    <div class="shared-page-tables-4colmns-button"><a href="http://google.com">Order Now</a></div>
                                    </div>
                                    <div id="standardterm2" class="desc">
                                    <label>You Save 5%</label>
                                    <div class="shared-page-tables-4colmns-button"><a href="http://msn.com">Order Now</a></div>
                                    </div>
                                    <div id="standardterm3" class="desc">
                                    <label>You Save 10%</label>
                                    <div class="shared-page-tables-4colmns-button"><a href="http://msn.com">Order Now</a></div>
                                    </div>
                                    <div class="shared-page-tables-4colmns-button" id="initial"><label>You Save $0</label><a href="#">Order Now</a></div>
                        </div> 

Recommended Answers

All 8 Replies

Yes i already included in my site but after including it the error remains the same

Member Avatar for diafol

How about simnplifying that...

<input type="radio" name="sharedprices" value="0" data-url="http://www.google.com" checked />
<input type="radio" name="sharedprices" value="5" data-url="http://www.msn.com"  />
<input type="radio" name="sharedprices" value="10" data-url="http://www.msn.com"  />

Also:

 $("input[name$='sharedprices']").click(function() {

Try:

 $("input[name='sharedprices']").click(function() {
     var pc = $(this).val();
     var url = $(this).data('url');
     var label = "You Save " + pc + "%";
     $('.desc label').html(label);
     $('.desc a').attr('href', url);
 });

For just this one DIV:

<div class="desc">
     <label>You Save 0%</label>
     <div class="shared-page-tables-4colmns-button">
         <a href="http://www.google.com">Order Now</a>
     </div>
</div>     

Thank you for your helps
but not i got a little solution but can you tell me how can i seprate this function for every radio having different name

$(document).ready(function() {
    $("div.desc").hide();
    $("input[name$='sharedprices']").change(function() {
        $("div.desc").hide();
        $("#" + this.value).show();
    }).filter(function(){
        return this.checked;
    }).change();
});
$(document).ready(function(radioname) {
    $("div.desc").hide();
    $("input[name$='"+radioname+"']").change(function() {
        $("div.desc").hide();
        $("#" + this.value).show();
    }).filter(function(){
        return this.checked;
    }).change();
});

is it possible to seperate this for every group
e.g.
Plan 1

1 Month
6 Months
12 Months
You save %
Buy Now Button

Plan 2

1 Month
6 Months
12 Months
You save %
Buy Now Button

Plan 3

1 Month
6 Months
12 Months
You save %
Buy Now Button

Plan 4

1 Month
6 Months
12 Months
You save %
Buy Now Button

Here is the working fiddle which i want to seprate

http://jsfiddle.net/VXK9t/

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.