I wanted to Hide a div section on step 1 and when click button or submitted it will display on step 2.
I tried adding a Javascript but still not working.
Order Summary should be hidden on the 1st step and on 2nd step, Order summary must be shown. `
I wanted to apply this for mobile view only.
<div class="chk-box">
<div class="chk-rgt">
<img src="@php echo $path['images'] @endphp/old-man.png" class="old-man hide-mob">
<p class="chk-rgt-txt1">Order Summary</p>
<div class="chk-rgt-mid">
<img src="<?= $image ?>" class="prod" style="max-width:280px;margin: 0 0 5px;">
<div class="chk-rtlbx">
<div class="chkrtlinbx-top">
<p class="chkrtlprc chkrtlprc1">Retail Price</p>
<p class="chkrtlprc2"><span class="strikeout">$<?= $retail_price ?></span></p>
</div>
<div class="chkrtlinbx-btm position">
<img src="@php echo $path['images'] @endphp/rtlarrow.png" alt="" class="chkrtlarrow">
<p class="chkrtlprc">Offer Price</p>
<p class="chkrtlprc3">$<?= (int) $product_details['product_price'] ?></p>
</div>
</div>
<p class="chk-prc">Tommy Chong’s Good Vibes<br> Protocol w/ Nano CBD <?= $supply ?><span>$<?= (int) $product_details['product_price'] ?></span></p>
<ul class="pric-list">
<li>Sales Tax :</li>
<li>$0.00</li>
<li>Shipping & Handling : </li>
<li>FREE</li>
<li>Grand Total :</li>
<li>$<?= (int) $product_details['product_price'] ?></li>
</ul>
<div class="rght-box hide-mob">
<ul class="icon-sec">
<li><img src="@php echo $path['images'] @endphp/seal-icon1.png"><br>GMO Free</li>
<li><img src="@php echo $path['images'] @endphp/seal-icon2.png"><br>Gluten Free</li>
<li><img src="@php echo $path['images'] @endphp/seal-icon3.png"><br>Made In USA</li>
</ul>
</div>
</div>
</div>
<div id="checkout" class="chk-left">
<form method="post" action="ajax.php?method=downsell1" name="downsell_form1" accept-charset="utf-8" enctype="application/x-www-form-urlencoded;charset=utf-8" id="downsell_form1">
<input type="hidden" name="no_use" id="no_use" value="utf-8" />
<input type="hidden" name="campaigns[1][id]" value="<?php echo ($_REQUEST['product'] ? $_REQUEST['product'] : '1') ?>">
<input type="hidden" name="billingSameAsShipping" value="yes"/>
<div id="shippingInfo" style=" float:left; width:100%;">
<div class="chk-lft-top">
<p class="chk-stp1"><img src="@php echo $path['images'] @endphp/icon1.png" class="icon1"><span>Step 1 Of 2 <img src="@php echo $path['images'] @endphp/chk-grn-arw.png" class="chk-grn-arw"></span>
<br>Shipping Information
</p>
</div>
<div class="form-mid">
<div class="frmElmnts1">
<label>First Name *</label>
<input type="text" name="firstName" placeholder="First Name" class="required" data-error-message="Please enter your first name!" />
</div>
<div class="frmElmnts2">
<label>Last Name *</label>
<input type="text" name="lastName" placeholder="Last Name" class="required" data-error-message="Please enter your last name!" />
</div><div class="clearall"></div>
<div class="frmElmnts3">
<label>Address *</label>
<input type="text" name="shippingAddress1" placeholder="Your Address" class="required" data-error-message="Please enter your address!" />
</div>
<div class="frmElmnts1">
<label>City *</label>
<input type="text" name="shippingCity" placeholder="Your City" class="required" data-error-message="Please enter your city!" />
</div>
<div class="frmElmnts1" style="display: none;">
<label>Country :*</label>
<select name="shippingCountry" class="required" data-selected="US" data-error-message="Please select your country!">
<option value="">Select Country</option>
</select>
</div>
<div class="frmElmnts2">
<label>State *</label>
<input type="text" name="shippingState" placeholder="Your State" class="required" data-error-message="Please select your state!" readonly />
</div>
<div class="frmElmnts1">
<label>Zip Code *</label>step2Btn
<input type="tel" name="shippingZip" data-validate="zip" onkeypress="return onlyNumbers(event);" maxlength="5" placeholder="Zip Code" class="required" data-error-message="Please enter a valid zip code!" />
</div>
<div class="frmElmnts2">
<label>Phone *</label>
<input type="tel" name="phone" onkeypress="return onlyNumbers(event);" maxlength="10" placeholder="Phone" class="required" data-validate="phone" data-min-length="10" data-max-length="15" data-error-message="Please enter a valid contact number!" />
</div>
<div class="frmElmnts3">
<label>Email *</label>
<input type="email" name="email" placeholder="Email Address" class="required" data-validate="email" data-error-message="Please enter a valid email id!" />
</div>
<div class="clearall"></div>
<input type="image" src="@php echo $path['images'] @endphp/chk-btn1.png" id="shippingButton" class="chk-btn chk-btn1 step2Btn">
<div class="post">
<img src="@php echo $path['images'] @endphp/post.png" class="forDesk">
<img src="@php echo $path['images'] @endphp/post-mob.png" class=" forTab forMob">
<p>
Your Order is estimated to arrive by<br class="forDesk forTab hide-mob">
<span>
</span>
</p>
</div>
</div>
</div>
<div id="billingInfo" style="display:none; float:left; width:100%;">
<div class="chk-lft-top">
<p class="chk-stp1"><img src="@php echo $path['images'] @endphp/icon2.png" class="icon1"><span>Step 2 Of 2 <img src="@php echo $path['images'] @endphp/chk-grn-arw.png" class="chk-grn-arw"></span>
<br>Payment Information
</p>
</div>
<div class="form-mid form-mid2">
<div class="sameas">
<label>
<input type="checkbox" checked="checked" class="chkbx" id="billingAddressCheckbox">
Billing address same as shipping.
</label>
</div>
<div class="billing-info" style="display:none;">
<div class="frmElmnts1">
<label>First Name *</label>
<input type="text" name="billingFirstName" class="field-all" placeholder="Billing First Name" data-error-message="Please enter your billing first name!" />
</div>
<div class="frmElmnts2">
<label>Last Name *</label>
<input type="text" name="billingLastName" class="field-all" placeholder="Billing Last Name" data-error-message="Please enter your billing last name!" />
</div>
<div class="frmElmnts3">
<label>Address *</label>
<input type="text" name="billingAddress1" class="field-all" placeholder="Billing Address" data-error-message="Please enter your billing address!" />
</div>
<div class="frmElmnts1">
<label>City *</label>
<input type="text" class="field-all" name="billingCity" placeholder="Billing City" data-error-message="Please enter your billing city!" />
</div>
<div class="frmElmnts1" style="display: none;">
<label>Billing Country:*</label>
<select name="billingCountry" data-selected="US" data-error-message="Please select your billing Country!">
<option value="">Select Country</option>
</select>
</div>
<div class="frmElmnts2">
<label>State *</label>
<input type="text" name="billingState" placeholder="Billing State" data-error-message="Please enter your billing state!" />
</div>
<div class="frmElmnts1">
<label>Zip Code *</label>
<input type="tel" onkeypress="return onlyNumbers(event);" maxlength="5" name="billingZip" class="field-all" placeholder="Billing Zip Code" data-error-message="Please enter a valid billing zip code!" />
</div>
<div class="clearall"></div>
</div>
<img src="@php echo $path['images'] @endphp/cards.png" class="cards">
<div class="clearall"></div>
<div class="frmElmnts1">
<label>Card Type</label>
<select name="creditCardType" id="creditCardType" class="field-all required" data-error-message="Please select valid card type!">
<option value="">Card Type</option>
@php
foreach($config['allowed_card_types'] as $key=>$value):
@endphp
<option value="@php echo $key @endphp">@php echo ucfirst($value) @endphp</option>
@php
endforeach
@endphp
</select>
</div>
<div class="frmElmnts2">
<label>Card Number</label>
<input type="tel" name="creditCardNumber" class="field-all required" maxlength="16" data-error-message="Please enter a valid credit card number!" />
</div>
<div class="frmElmnts1 frmElmnts111 exp-det">
<div class="frmElmnts1 frmElmnts11">
<label>Expiration Date</label>
<select name="expmonth" class="field-all required expmonth" data-error-message="Please select a valid expiry month!">
@php get_months(); @endphp
</select>
</div>
<div class="frmElmnts2 frmElmnts11">
<label>Expiration Year</label>
<select name="expyear" class="field-all required" data-error-message="Please select a valid expiry year!">
@php get_years(); @endphp
</select>
</div>
</div>
<div class="frmElmnts2 frmElmnts22 cvv-holder">
<a href="javascript:void(0);" onclick="javascript:openNewWindow('page-cvv.php', 'modal');" class="cvv-pop"><i class="fa fa-question-circle" aria-hidden="true"></i></a>
<label>CVV</label>
<input type="tel" name="CVV" onkeypress="return onlyNumbers(event);" class="field-all required" data-validate="cvv" maxlength="3" data-error-message="Please enter a valid CVV code!" />
</div>
<div class="clearall"></div>
<div class="sameas sameas2">
<label>
<input type="checkbox" name="cus-checkbox-group" class="chkbx2 agree-checkbox" data-error-message="You have to agree with the terms in order to proceed!">
By clicking submit I agree to the <a href="javascript:void(0);" onclick="javascript:openNewWindow('page-terms.php', 'modal'); return false;" class="trms">terms of use</a>
</label>
</div>
<input type="image" src="@php echo $path['images'] @endphp/chk-btn.jpg" class="chk-btn">
<div class="clearall"></div>
<img src="@php echo $path['images'] @endphp/visa.png" class="visa">
<div class="mony-seal-sec">
<img src="@php echo $path['images'] @endphp/mony-seal.png" class="mony-seal">
<p class="seal-txt1">Life Time <br class="forMob">Money Back Guarantee</p>
<p class="seal-txt2">Your purcahse of Tommy Chong's CBD is backed by our <span>Life Time Money Back Guaranteee!</span><br class="forDesk"> In case you are not satisfied with the results, we will refund your money, no hassles & no questions asked.</p>
</div>
<div class="rght-box forMob">
<ul class="icon-sec">
<li><img src="@php echo $path['images'] @endphp/seal-icon1.png"><br>GMO Free</li>
<li><img src="@php echo $path['images'] @endphp/seal-icon2.png"><br>Gluten Free</li>
<li><img src="@php echo $path['images'] @endphp/seal-icon3.png"><br>Made In USA</li>
</ul>
</div>
</div>
</div>
<p id="loading-indicator" style="display:none;">Processing...</p>
<p id="crm-response-container" style="display:none;">CRM messages will appear here...</p>
</form>
</div>
</div>
JS:
<script>
const shippingButton = document.getElementById("shippingButton");
const chkrgt = document.querySelector(".chk-rgt");
const toggleShowList = () => {
const isHidden = chkrgt.style.display === "none";
if (isHidden) {
// Display hidden element
chkrgt.style.display = "block";
actionButton.innerHTML = "Hide List";
} else {
// Hide element
chkrgt.style.display = "none";
actionButton.innerHTML = "Show List";
}
};
// Adding click event listener
actionButton.addEventListener("click", toggleShowList);
</script>
I wanted to Hide a div section on step 1 and when click button or submitted it will display on step 2.
I tried adding a Javascript but still not working. Can anyone help me with this? Thanks
Order Summary should be hidden on the first step and on 2nd step, Order summary must be shown.
2
Answers
I tried and its showing now the button but I wanted to connect with the same current input button below. So by default it should hide first the .chk-rgt then when the user fill the form and click the id="shippingButton is clicked it will proceed on step 2 and will show the .chk-rgt.
Thanks for your quick reply.
To achieve this, you need to create a toggle mechanism to control the visibility of the "Order Summary" section based on user actions. Here’s an example of how you can achieve this using the provided HTML structure and adding a bit of JavaScript: