javascript - Trying to limit data-toggle in Bootstrap Accordion to .one click event -
right have bootstrap accordion set when panel body clicked automatically closes panel , opens next. restrict event occur once per page load. #carriers first panel-body #storage id of next panel-body.
i tried .one jquery expression seemed disable accordion. i'm guessing need in js hoping there way "data-toggle" once per page load.
html accordion:
<div class="container"> <div class="row" align="center"> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <!---carrier heading---> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingcarriers" class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#carriers" aria-expanded="false" aria-controls="carriers"> <h4 class="panel-title"> <a class="btn-3 btn-block btn-default" data-toggle="collapse" data-parent="#accordion" href="#collapseone" aria-expanded="true" aria-controls="collapseone"> step 1: carrier? <span data-toggle="tooltip" data-placement="left" title="select cellular/data provider device uses." class="glyphicon glyphicon-info-sign" style="float:right"></span> </a> </h4> </div> <!---carrier inputs---> <div id="carriers" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingcarrier" data-parent="#accordion" href="#carriers"> <div class="panel-body" data-toggle="collapse" data-target="#storage"> <div id="att" class="col-sm-6 col-md-2"> <label> <input type="radio" name="carrier" value="att"/> <div class="thumbnail input1"> <img src="images/att-icon.png" alt="..." class="img-responsive"> </div> </label> </div> <div id="verizon" class="col-sm-6 col-md-2"> <label> <input type="radio" name="carrier" value="verizon"/> <div class="thumbnail input1"> <img src="images/verizon-icon.png" alt="..." class="img-responsive"> </div> </label> </div> <div id="sprint" class="col-sm-6 col-md-2"> <label> <input type="radio" name="carrier" value="sprint"/> <div class="thumbnail input1"> <img src="images/sprint-icon.png" alt="..." class="img-responsive"> </div> </label> </div> <div id="t-mobile" class="col-sm-6 col-md-2"> <label> <input type="radio" name="carrier" value="t-mobile"/> <div class="thumbnail input1"> <img src="images/t-mobile-logo.png" alt="..." class="img-responsive"> </div> </label> </div> <div id="unlocked" class="col-sm-6 col-md-2"> <label> <input type="radio" name="carrier" value="unlocked"/> <div class="thumbnail input1"> <img src="images/factoryunlocked.png" alt="..." class="img-responsive"> </div> </label> </div> <div id="other" class="col-sm-6 col-md-2"> <label> <input type="radio" name="carrier" value="other"/> <div class="thumbnail input1"> <img src="images/othercarriers.png" alt="..."> </div> </label> </div> </div> </div> </div> <!---storage heading---> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingstorage" class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#storage" aria-expanded="false" aria-controls="storage"> <h4 class="panel-title"> <a class="btn-3 btn-block btn-default" data-toggle="collapse" data-parent="#accordion" href="#collapseone" aria-expanded="true" aria-controls="collapseone"> step 2: how storage? <span data-toggle="tooltip" data-placement="left" title="how many gb device have in storage?" class="glyphicon glyphicon-info-sign" style="float:right"></span> </a> </h4> </div> <!---storage inputs---> <div id="storage" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingstorage" data-parent="#accordion" href="#storage"> <div class="panel-body" data-toggle="collapse" data-target="#condition"> <div id="placeholder2" class="col-sm-12 col-md-3"> </div> <div id="storage16" class="col-sm-12 col-md-2"> <label> <input type="radio" name="storage" value="16"/> <div class="thumbnail input1"> <img src="images/16gb.png" alt="..."> </div> </label> </div> <div id="storage64" class="col-sm-12 col-md-2"> <label> <input type="radio" name="storage" value="64"/> <div class="thumbnail input1"> <img src="images/64gb.png" alt="..."> </div> </label> </div> <div id="storage128" class="col-sm-12 col-md-2"> <label> <input type="radio" name="storage" value="128"/> <div class="thumbnail input1"> <img src="images/128gb.png" alt="..."> </div> </label> </div> </div> </div> </div> <div id="conditionpanel" class="panel panel-default"> <div class="panel-heading" role="tab" id="headingcondition" class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#condition" aria-expanded="false" aria-controls="condition"> <h4 class="panel-title"> <a class="btn-3 btn-block btn-default" data-toggle="collapse" data-parent="#accordion" href="#collapseone" aria-expanded="true" aria-controls="collapseone"> step 3: condition? <span data-toggle="tooltip" data-placement="left" title="ensure accurately choose condition bests describes device." class="glyphicon glyphicon-info-sign" style="float:right"></span> </a> </h4> </div> <!---condition inputs---> <div id="condition" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingcondition" data-parent="#accordion"> <div class="panel-body" data-toggle="collapse" data-target="#condition"> <div id="condition"> <div id="condition1" class="col-sm-12 col-md-3"> <label> <input type="radio" name="condition" value="1"/> <div class="thumbnail input1"> <div class="btn btn-lg btn-success btn-block">like new</h1></div> <div class="caption"> <p>"like new" phones brand new, , have no signs of use. few phones in condition.</p> </div> </div> </label> </div> <hr class="hidden-md hidden-lg"> <div id="condition2" class="col-sm-12 col-md-3"> <label> <input type="radio" name="condition" value="2"/> <div class="thumbnail input1"> <div class="btn btn-lg btn-primary btn-block">good</h1></div> <div class="caption"> <p>"good" phones appear lightly used , function %100. phones fall in category.</p> </div> </div> </label> </div> <hr class="hidden-md hidden-lg"> <div id="condition3" class="col-sm-12 col-md-3"> <label> <input type="radio" name="condition" value="3"/> <div class="thumbnail input1"> <div class="btn btn-lg btn-warning btn-block">cracked</h1></div> <div class="caption"> <p>"cracked" phones have damaged screens, otherwise function , "good" phone.</p> </div> </div> </label> </div> <hr class="hidden-md hidden-lg"> <div id="condition4" class="col-sm-12 col-md-3"> <label> <input type="radio" name="condition" value="4"/> <div class="thumbnail input1"> <div class="btn btn-lg btn-danger btn-block">poor</h1></div> <div class="caption"> <p>"poor" phones may have water damage, missing buttons, heavy wear, or not turn on.</p> </div> </div> </label> </div> </div> </div> </div> </div> </div> </div> </div> </form> js:
$(function() { //scroll top in index.html $("#backtotop").on('click', function() { $('html, body').animate({ scrolltop: $("header").offset().top }, 350); }); // carrier input $("#carriers").one('click', function() { $('#question').hide (); $('html, body').animate({ scrolltop: $("#carriers").offset().top }, 500); }); //att $("#att").on('click', function() { $('#att2').show(300).siblings().hide (); }); //verizon $("#verizon").on('click', function() { $('#verizon2').show(300).siblings().hide (); }); //sprint $("#sprint").on('click', function() { $('#sprint2').show(300).siblings().hide (); }); //t-mobile $("#t-mobile").on('click', function() { $('#t-mobile2').show(300).siblings().hide (); }); //unlocked $("#unlocked").on('click', function() { $('#unlocked2').show(300).siblings().hide (); }); //other $("#other").on('click', function() { $('#other2').show(300).siblings().hide (); }); //data $("#data").on('click', function() { $('#data2').show(300).siblings().hide (); }); //wifi $("#wifi").on('click', function() { $('#wifi2').show(300).siblings().hide (); }); // storage input $("#storage").one('click', function() { $('#question').hide (); $('html, body').animate({ scrolltop: $("#storage").offset().top }, 500); }); //8gb $("#storage8").on('click', function() { $('#2storage8').show(300).siblings().hide (); }); //16gb $("#storage16").on('click', function() { $('#2storage16').show(300).siblings().hide (); }); //32gb $("#storage32").on('click', function() { $('#2storage32').show(300).siblings().hide (); }); //64gb $("#storage64").on('click', function() { $('#2storage64').show(300).siblings().hide (); }); //128gb $("#storage128").on('click', function() { $('#2storage128').show(300).siblings().hide (); }); //256gb $("#storage256").on('click', function() { $('#2storage256').show(300).siblings().hide (); }); //512gb $("#storage512").on('click', function() { $('#2storage512').show(300).siblings().hide (); }); //event handler prevent , down key presses changing 'condition input' $('input[type="radio"]').keydown(function(e) { var arrowkeys = [37, 38, 39, 40]; if (arrowkeys.indexof(e.which) !== -1) { $(this).blur(); return false; } }); //condition input $("#condition").one('click', function() { $('#question').hide (); $('#resultsbutton, .verifyresults').slidedown(425); $('html, body').animate({ scrolltop: $("#questions").offset().top - 50 }, 250); }); //like new $("#condition1").on('click', function() { $('#condition1-2').show(300).siblings().hide (); }); //good $("#condition2").on('click', function() { $('#condition2-2').show(300).siblings().hide (); }); //cracked $("#condition3").on('click', function() { $('#condition3-2').show(300).siblings().hide (); }); //poor $("#condition4").on('click', function() { $('#condition4-2').show(300).siblings().hide(); }); //accordion heading tabs //condition header $("#headingcondition").on('click', function() { $('html, body').animate({ scrolltop: $("#headingcondition").offset().top }, 200); }); //storage header $("#headingstorage").on('click', function() { $('html, body').animate({ scrolltop: $("#headingstorage").offset().top }, 200); }); //carrier header $("#headingcarrier").on('click', function() { $('html, body').animate({ scrolltop: $("#headingcarrier").offset().top }, 200); }); //hidden thumbnails $(".carriervalue").on('click', function() { $('#carriers').collapse('show'); $('html, body').animate({ scrolltop: $("#headingcarriers").offset().top }, 500); }); $("#storagevalue").on('click', function() { $('#storage').collapse('show'); $('html, body').animate({ scrolltop: $("#headingstorage").offset().top }, 500); }); $("#conditionvalue").on('click', function() { $('#condition').collapse('show'); $('html, body').animate({ scrolltop: $("#headingcondition").offset().top }, 500); }); // verification message $("#verifyselection").on('click', function() { $('html, body').animate({ scrolltop: $("#logo").offset().top }, 500); }); $(".btn-group").on('click', function() { $('html, body').animate({ scrolltop: $(this).offset().top - 300 }, 350); }); }); // form validation, returns alert "please enter (missing value)" on submit if 1 of radio buttons did not clicked. function validateform() { var x = document.forms["selection"]["carrier"].value; var y = document.forms["selection"]["storage"].value; var z = document.forms["selection"]["condition"].value; if (x == null || x == "") { alert("please enter 'carrier'"); return false; } if (y == null || y == "") { alert("please enter 'storage' value"); return false; } if (z == null || z == "") { alert("please enter 'condition' value"); return false; } } // form validation models no storage option function validateform2() { var x = document.forms["selection"]["carrier"].value; var z = document.forms["selection"]["condition"].value; if (x == null || x == "") { alert("please enter 'carrier'"); return false; } if (z == null || z == "") { alert("please enter 'condition' value"); return false; } } //initialize tooltips $(function () { $('[data-toggle="tooltip"]').tooltip() })
this of answer have given information you've provided:
this sounds job boolean flag.
the way works have variable, let's hasaccordianbeenclosed, , start setting false.
add check if true before closed code runs. after runs set variable true, , not run again.
Comments
Post a Comment