jquery - Javascript hiding my selected div -
i have option select engine package product on 1 of e-commerce listing/product pages. link: https://www.inflatableboats.net/avon-seasport-inflatable-boat-seasport-470-neo-2017-with-yamaha-four-stroke/.
i have small script changes product description according engine selected above. problem running have added several other options , hiding description when other options selected. here script sits on website:
$(function() { "use strict"; $(".specs div:gt(0)").hide(); $(".form-field-control input").click(function() { var clicked = $(".form-field-control input").index(this); var descriptiontoshow = $(".specs div:eq(" + clicked + ")"); descriptiontoshow.show(); $(".specs div").not(descriptiontoshow).hide(); }); });now, see part of issue , have added additional selector , created new problem.
i swapped:
var clicked = $(".form-field-control input").index(this); to be:
var clicked = $(".form-field-radio > .form-field-control input").index(this); this changed problem hiding div not switching first div second. appreciated, not js expert means.
here html engine option , next option below it:
<div class="form-field form-field-options form-field-radio form-required" data-product-attribute="set-radio"> <div class="form-field-title product-option-title"> engine choice <span class="required-text">(required)</span> </div> <div class="form-field-control"> <label class="form-label" data-product-attribute-value="143"> <input class="form-input form-radio" id="attribute-143" name="attribute[705]" value="143" checked="" required="" aria-required="" type="radio"> <span class="form-label-text">yamaha f70la 4 stroke</span> </label> <label class="form-label" data-product-attribute-value="144"> <input class="form-input form-radio" id="attribute-144" name="attribute[705]" value="144" required="" aria-required="" type="radio"> <span class="form-label-text">yamaha f90lb 4 stroke</span> </label> </div> </div> <div class="form-field form-field-options form-field-checkbox form-required" data-product-attribute="input-checkbox"> <div class="form-field-title"> pre delivery inspection <span class="required-text">(required)</span> </div> <div class="form-field-control"> <label class="form-label "> <input class="form-input form-checkbox" id="attribute-706" name="attribute[706]" value="116" required="" aria-required="true" type="checkbox"> <span class="form-label-text">$600 - standard fee requested manufacturers, performed on new vessels, preparing & testing vessel on & off water turn-key delivery. validates warranties. required fee</span> </label> </div> </div>and here product description html:
<div class="specs"> <p>the largest of zodiac avon seasport deluxe inflatables, 470 big boy. rig these yamaha f90’s or f70's, sound race car engines when revved. 470 has deep “v” , stern seat moved forward bit support motor , assist planing. boat can expected reach 40-45 mph on top end, depending on conditions. boat has large fuel tank of 22.5 gallons, giving full day of play. 470 has many options available factory fresh water shower , picnic table, synthetic teak decking , bathing ladder.</p> <div id="description1"> <br /> <h3 class="specstitle">boat specifications</h3> <ul class="specdetails"> <li>loa: 15'5"</li> <li>beam: 6'9"</li> <li>weight: 910 lbs (boat only)</li> <li>capacity: 9 persons or 2083 lbs</li> <li>max motor: 90 hp long</li> <li>rec motor: 70 hp long</li> <li>tube diameter: 20"</li> <li>air chambers: 5</li> <li>fuel tank: 22.5 gals</li> <li>fabric type: hypalon</li> <li>factory warranty: 5 years</li> </ul> <br /> <h3 class="specstitle">standard features</h3> <p>v-shaped fiberglass hull built-in flaps, anchor locker upholstered seat, rear locker gas strut, 1 bow d-ring, 2 stern rings, stainless steel bow rail, rear boarding steps, steering wheel + steering system + cable + glove box, built-in fuel tank + gauge + fuel/water separator, recess extinguisher, double pilot/co-pilot seat removable upholstered seat, passenger seats removable upholstered cushion, 4 stainless steel mooring cleats, 3 lifting points, courtesy light, navigation lights, battery switch + box, automatic bilge pump, 2 paddles, foot pump, pressure gauge, repair kit, owner's manual</p> <br /> <h3 class="specstitle">motor specifications</h3> <ul class="specdetails"> <li>engine type: yamaha f70la 4-stroke</li> <li>horsepower: 70 hp</li> <li>cylinders: 4 cyl</li> <li>shaft length: 20"</li> <li>steering: remote mech</li> <li>starter: electric</li> <li>weight: 253 lbs</li> <li>full throttle range: 5300 - 6300 rpm</li> <li>displacement: 996cc</li> <li>induction system: dohc efi</li> <li>warranty: 3 years</li> </ul> <br /> <h3 class="specstitle">standard features</h3> <p>electric start, remote mech steering, power trim & tilt, aluminum propeller, easy flush system</p> <br /> <h3 class="specstitle">standard rigging</h3> <p>flush mounted remote control harness , separate keyswitch, command link round tach , speedo, water/fuel separator, mechanical control cables</p> </div> <div id="description2"> <br /> <h3 class="specstitle">boat specifications</h3> <ul class="specdetails"> <li>loa: 15'5"</li> <li>beam: 6'9"</li> <li>weight: 910 lbs (boat only)</li> <li>capacity: 9 persons or 2083 lbs</li> <li>max motor: 90 hp long</li> <li>rec motor: 70 hp long</li> <li>tube diameter: 20"</li> <li>air chambers: 5</li> <li>fuel tank: 22.5 gals</li> <li>fabric type: hypalon</li> <li>factory warranty: 5 years</li> </ul> <br /> <h3 class="specstitle">standard features</h3> <p>v-shaped fiberglass hull built-in flaps, anchor locker upholstered seat, rear locker gas strut, 1 bow d-ring, 2 stern rings, stainless steel bow rail, rear boarding steps, steering wheel + steering system + cable + glove box, built-in fuel tank + gauge + fuel/water separator, recess extinguisher, double pilot/co-pilot seat removable upholstered seat, passenger seats removable upholstered cushion, 4 stainless steel mooring cleats, 3 lifting points, courtesy light, navigation lights, battery switch + box, automatic bilge pump, 2 paddles, foot pump, pressure gauge, repair kit, owner's manual</p> <br /> <h3 class="specstitle">motor specifications</h3> <ul class="specdetails"> <li>engine type: yamaha f90lb 4-stroke</li> <li>horsepower: 90 hp</li> <li>cylinders: 4 cyl</li> <li>shaft length: 20"</li> <li>steering: remote mech</li> <li>starter: electric</li> <li>weight: 353 lbs</li> <li>full throttle range: 5000 - 6000 rpm</li> <li>displacement: 1832cc</li> <li>induction system: dohc efi</li> <li>warranty: 3 years</li> </ul> <br /> <h3 class="specstitle">standard features</h3> <p>electric start, remote mech steering, power trim & tilt, aluminum propeller, easy flush system</p> <br /> <h3 class="specstitle">standard rigging</h3> <p>flush mounted remote control harness , separate keyswitch, command link round tach , speedo, water/fuel separator, mechanical control cables</p> </div> </div>
i believe have solved own riddle. changed script , working. long don't use radio buttons else on page.
$(function() { "use strict"; $(".specs div:gt(0)").hide(); $(".form-radio").click(function() { var clicked = $(".form-radio").index(this); var descriptiontoshow = $(".specs div:eq(" + clicked + ")"); descriptiontoshow.show(); $(".specs div").not(descriptiontoshow).hide(); }); });
Comments
Post a Comment