Ad

How To Hide/show Previous And Next Section Class With Jquery

- 1 answer

I have a small website where I have a few sections that make up a purchase form. All sections have the same class name that cannot be renamed. Currently my code allows the user to be scrolled to the next section once they complete the current one they're in. However I'm looking to change this by adding Previous/Next buttons. I realize one way this can be done is by separating the sections into tabs. However I would really like to do this with jQuery instead of tabs for simplicity due to code being in shopify's liquid.

Here's how my current set-up looks

HTML (missing some info to simplify)

<form method="post" action="/cart/add" id="12345" accept-charset="UTF-8" class="shopify-product-form" enctype="multipart/form-data"><input type="hidden" name="form_type" value="product"><input type="hidden" name="utf8" value="✓">

<section class="custom_config"> 
   <ul>
        <li><input class="choice" id="keep" type="radio" name="properties[Background]" value="keep" required="">
        <label for="keep">Keep</label></li>
        <li><input class="choice" id="remove" type="radio" name="properties[Background]" value="remove" required="">
        <label for="remove">Remove</label></li>
    </ul> 
</section> 
<section class="custom_config"> ... </section>
<section class="custom_config"> ... </section>

<button id="checkoutbtn" type="submit" class="btn btn-lg js-add-to-cart-product-page" data-product-handle="custom" data-variant-id="20262476120160" title="Add to Cart"><span>Add to Cart</span></button>
</form>

and the jQuery moving the user to the next part of the section once they complete their current section.

$('.choice').on('change', function() {
    var nextQuestion = $(this).closest('.custom_config').next();

    if (nextQuestion.length !== 0) {
        $('html, body').animate({
            scrollTop: nextQuestion.offset().top
        }, 1000);
    }
});

$('.tab-title').on('change', function() {
    var nextQuestion = $(this).closest('.custom_config').next();

    if (nextQuestion.length !== 0) {
        $('html, body').animate({
            scrollTop: nextQuestion.offset().top
        }, 1000);
    }
});

How can this be changed so that only the first "custom_config" class is shown and the others are hidden until the user clicks a "next" button and display the "back" (to change previous selections) and "buy button" once they get to the end.

I realize this is asking for a lot but this is very new to me and I've been trying to figure this out with very little success. I'm looking to get this to work before giving up and leaving it as is.

Ad

Answer

In this solution, first of all you have to create a variable and use it to put the number of .custom_config active in your page.

In the init situation, for example, you will have to active the first one, when you click first time on next button the second one and so on.

So, create this variable and set it to 1 (your initial value) and also complete your initial situation (i.e., first .custom_config active, and .back & #checkoutbtn hidden):

$(".back, #checkoutbtn").hide();
$(".custom_config:nth-of-type(1)").addClass("open");
var i = 1;

After that you have to create a function to check what should happen when your variable number changes its value. All the controls are in this function (I commented every single line)

function control(){
    if(i <= 1){
        // if i is equals to or smaller than 1...
        i = 1; // ...put i always equals to 1...
        $(".back").hide() // ...hide .back button
        $(".next").show(); // ...show .next button
    } else if (i >= $(".custom_config").length){
        // if i is equals to or greater than the .custom_config length...
        i = $(".custom_config").length; // ...put i always equals to your .custom_config length
        $("#checkoutbtn").show(); // ...then show checkoutbtn
        $(".next").hide(); // ...hide next button
    } else {
        // in all other cases...
        $("#checkoutbtn").hide(); // hide checkout button
        $(".back, next").show(); // show back & next button
    }

    $(".custom_config").removeClass("open"); // after that always remove class open to all your .custom_config div...
    $(".custom_config:nth-of-type("+i+")").addClass("open"); //and put it to correct .custom_config that you need to see
}

Now your .next and .back button have only to add or to remove an unit from your variable:

$(".next, .back").on("click", function(e){
    if($(this).hasClass("next")) i ++;
    else i --;
    control();
});

EDIT 1 For the problem you talk in your comment, try to add e.preventDefault(); to function:

$(".next, .back").on("click", function(e){
    e.preventDefault(); //add this line
    if($(this).hasClass("next")) i ++;
    else i --;
    control();
});

Also add $(".next").show(); to function control to prevent a little bug that I noticed. I rewrote the snippet with these changes, try it:

$(".back, #checkoutbtn").hide();
$(".custom_config:nth-of-type(1)").addClass("open");
var i = 1;

$(".next, .back").on("click", function(e){
    e.preventDefault();
	if($(this).hasClass("next")) i ++;
	else i --;
	control();
});

function control(){
	if(i <= 1){
		i = 1;
		$(".back").hide()
        $(".next").show();
	} else if (i >= $(".custom_config").length){
		i = $(".custom_config").length;
    $(".next").hide();
		$("#checkoutbtn").show();
	} else {
		$("#checkoutbtn").hide();
		$(".back, .next").show();
	}

	$(".custom_config").removeClass("open");
	$(".custom_config:nth-of-type("+i+")").addClass("open");
}
/* you can remove these CSS */
.custom_config:nth-of-type(1){
	background-color:red;
}

.custom_config:nth-of-type(2){
	background-color:yellow;
}

.custom_config:nth-of-type(3){
	background-color:green;
}
/* you can remove these CSS */


.custom_config{
	display:none;
}

.open{
	display:block;
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<form method="post" action="/cart/add" id="12345" accept-charset="UTF-8" class="shopify-product-form" enctype="multipart/form-data">
<input type="hidden" name="form_type" value="product">
<input type="hidden" name="utf8" value="✓">

<section class="custom_config"> 
   <ul>
        <li><input class="choice" id="keep" type="radio" name="properties[Background]" value="keep" required="">
        <label for="keep">Keep</label></li>
        <li><input class="choice" id="remove" type="radio" name="properties[Background]" value="remove" required="">
        <label for="remove">Remove</label></li>
    </ul> 
</section> 
<section class="custom_config"> Content 2 </section>
<section class="custom_config"> Content 3 </section>


<button class="back">Back</button>
<button class="next">Next</button>
<button id="checkoutbtn" type="submit" class="btn btn-lg js-add-to-cart-product-page" data-product-handle="custom" data-variant-id="20262476120160" title="Add to Cart"><span>Add to Cart</span></button>
</form>

Ad
source: stackoverflow.com
Ad