javascript - Hide the header ( link) of accordian from the form -
i creating form consist of 3 parts. want shift other form via clicking 'next' button rather clicking header portion of jquery. had implemented jquery accordion in form , shifting other via next , button. cant hide link or header of accordion. want hide link(header of accordion) in advance
<h1 class="top bottom"><span>help me</span> buy , sell house</h1> <h2>this form quick & easy complete - in 3 steps!</h2> <form name="cmaform" id="cmaform" method="post"> <input type="hidden" name="recordrequestprimaryserviceid" id="recordrequestprimaryserviceid" value="100" /> <input type="hidden" name="recordclientservices" id="recordclientservices" value="1,3" /> <ul id="stepform" class="ui-accordion-container"> <li id="sf1"> <a href='#' class="ui-accordion-link"> </a> <div> <div class="buttonwrapper"> <input name="formnext1" type="button" class="open1 nextbutton" value="next" alt="next" title="next" /> </div> </div> </li> <li id="sf2"> <a href='#' class="ui-accordion-link"></a> <div> <div class="buttonwrapper"> <input name="formback0" type="button" class="open0 prevbutton" value="back" alt="back" title="back" /> <input name="formnext2" type="button" class="open2 nextbutton" value="next" alt="next" title="next" /> </div> </div> </li> <li id="sf3"> <a href='#' class="ui-accordion-link"></a> <div> <div class="buttonwrapper"> <input name="formback1" type="button" class="open1 prevbutton" value="back" alt="back" title="back" /> <input name="submit" type="submit" id="submit" value="submit" class="submitbutton" alt="submit" title="submit"> </div> </div> </li> </form> and in javascript code on event of button click switch between different form
<script> $(document).ready(function(){ //display form in accordion var accordion = $('#stepform').accordion(); var current = 0; $('.open1').on('click',function(){ accordion.accordion("option", "active", 1); current = 1; }); $('.open2').on('click',function(){ accordion.accordion("option", "active", 2); current = 2; }); $('.open3').on('click',function(){ accordion.accordion("option", "active", 3); current = 3; }); $('#sf3 .prevbutton').on('click', function(){ accordion.accordion("option", "active", 1); current = 1; }); $('#sf2 .prevbutton').on('click', function(){ accordion.accordion("option", "active", 0); current = 0; }); }); </script> but user can switch between various form clicking header also. want disable or hide( best) functionality.
you can disable event accordian. button clicking code still work.
accordion.accordion({event: false});
i've added in line headers don't links when hover. can modify css though
$('.ui-accordion-header').css('cursor', 'default');
Comments
Post a Comment