Trying to limit data-toggle in Bootstrap Accordion to .one click event

Question

Right now I have a Bootstrap Accordion set up so when a panel body is clicked it automatically closes that panel and opens the next. I would like to restrict this event to only occur once per page load. #Carriers is the first panel-body #Storage is the ID of the next panel-body.

I tried a .one Jquery expression but it seemed to disable the accordion. I'm guessing i need to do this in JS but i was hoping there was a way to "data-toggle" only once per page load.

html accordion:


                  
                    

                      

                      
                        
                          
                            
                              Step 1: Which Carrier? 

                            

                          
                        



                        


                        
                          

                            

                                
                                    
                                        
                                        
                                        
                                

                            

                            
                                
                                    
                                        
                                        
                                        
                                
                            
                            
                                
                                    
                                        
                                        
                                        
                                
                            
                            
                                
                                    
                                        
                                        
                                        
                                
                            

                            
                                
                                    
                                        
                                        
                                        
                                
                            

                            

                                    
                                        
                                            
                                              
                                            
                                            
                            

                          
                        
                      


                      

                      
                        
                          
                            
                              Step 2: How Much Storage? 

                            
                          
                        



                        


                        
                          

                                

                                
                                

                                    
                                        
                                            
                                              
                                            
                                            
                                
                                

                                    
                                        
                                            
                                              
                                            
                                            
                                
                                

                                    
                                        
                                            
                                              
                                            
                                            
                                


                          
                        
                      
                      
                        
                          

                              
                              Step 3: What Is The Condition? 

                            

                          
                        




                        



                        
                            
                                

                                    
                                        
                                            
                                                
                                                  Like New
                                                  
                                                    "Like New" phones look brand new, and have no signs of use. Very few phones are in this condition.
                                                  
                                                
                                        
                                    

                                    

                                    
                                        
                                            
                                                
                                                  Good
                                                  
                                                    "Good" phones appear to be lightly used and function %100. Most phones fall in this category.
                                                  
                                                
                                        
                                    

                                    

                                    
                                        
                                            
                                                
                                                  Cracked
                                                  
                                                    "Cracked" phones have damaged screens, but otherwise function and look like a "Good" phone.
                                                  
                                                
                                        
                                    

                                    

                                    
                                        
                                            
                                                
                                                  Poor
                                                  
                                                    "Poor" phones may have water damage, missing buttons, heavy wear, or do not turn on.

JS:

$(function()  {

    //scroll back to 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 to prevent up and down key presses from 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 one of the radio buttons did not get 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 a 'Carrier'");
        return false;
        }

        if (y == null || y == "") {
        alert("Please enter a 'Storage' value");
        return false;
        }
        if (z == null || z == "") {
        alert("Please enter a 'Condition' value");
        return false;
        }
    }

// Form Validation for models with 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 a 'Carrier'");
        return false;
        }
        if (z == null || z == "") {
        alert("Please enter a 'Condition' value");
        return false;
        }
    }

    //initialize tooltips
    $(function () {
        $('[data-toggle="tooltip"]').tooltip()
    })

Dave Lunny · Accepted Answer

This is as good of an answer I have for you given the information you've provided:

This sounds like a job for a Boolean flag.

The way this works is that you have a variable, let's say hasAccordianBeenClosed, and you start by setting it to false.

Add a check if this is true before your closed code runs. After it runs set that variable to true, and it will not run again.

Trying to limit data-toggle in Bootstrap Accordion to .one click event

Answers (1)

Related Questions