How to fix CSS height transition so it fluidly goes back to place

user_8959311 0
Viewed 32

Any time I have elements within my div ".packagebuilder" get class ".shown" added it adds code to fluidly transition. It works when the pricing table appears but not when all the other elements come into view. When ".hidden" gets added it should fluidly go back into place, but it doesn't transition at all, just immediately flashes back. What am I missing? Appreciate any help.

.hidden {
    opacity: 0;
    max-height: 0px;
    transition: max-height 0s cubic-bezier(0, 1, 0, 1) 0s;
    position:absolute;
    top:-100000px;
}

.shown {
    opacity: 1;
    max-height: 1000px;
    transition: max-height 1s ease-in-out 0s;
    position:relative;
}

This is the code. Anything with the class "hidden" will get "shown" added onclick of an input.

    var seoSelect = document.querySelector("select#seo");
    var designSelect = document.querySelector("select#design");
    var anySelect = document.querySelector(".packagebuilder select");
    var seoOption = document.querySelector(".seo.option");
    var designOption = document.querySelector(".design.option");
    var anyOption = document.querySelector(".packagebuilder .option");
    var estimateTable = document.querySelector(".estimate");


    //Price Table Items
    var seofirstmonthitem = document.querySelector(".item.seofirstmonth");
    var seosetupfeeitem = document.querySelector(".item.setupfee");
    var designdeposititem = document.querySelector(".item.designdeposit");
    var designpayoffitem = document.querySelector(".item.designpayoff");
    var seomonthlyitem = document.querySelector(".item.seomonthly");

    var dueToday = document.querySelector(".today #val");
    var dueLater = document.querySelector(".later #val");
    var dueMonthly = document.querySelector(".monthly #val");


    function hidePriceTable() {
        $(estimateTable).addClass("hidden");
        $(estimateTable).removeClass("shown");
        $(".disclaimer.pricing").addClass("hidden");
        $(".disclaimer.pricing").removeClass("shown");
        $(".button.package").addClass("hidden");
        $(".button.package").removeClass("shown");
    }

    function showPriceTable() {
        $(estimateTable).removeClass("hidden");
        $(estimateTable).addClass("shown");
        $(".disclaimer.pricing").removeClass("hidden");
        $(".disclaimer.pricing").addClass("shown");
        $(".button.package").removeClass("hidden");
        $(".button.package").addClass("shown");
    }

    function HideSE0() {
        $(seoOption).addClass("hidden");
        $(seoOption).removeClass("shown");
    }

    function ShowSEO() {
        $(seoOption).addClass("shown");
        $(seoOption).removeClass("hidden");
    }

    function HideDesign() {
        $(designOption).addClass("hidden");
        $(designOption).removeClass("shown");

    }

    function ShowDesign() {
        $(designOption).addClass("shown");
        $(designOption).removeClass("hidden");
    }

    function hideSEOcontent() {
        $(".item.seofirstmonth").hide();
        $(".item.seomonthly").hide();
        $(".item.setupfee").hide();
        $('select#seo').prop('selectedIndex', null);
        $("input#seosetup").val("0");
        $("input#seovalue").val("0");
        HideSE0();
    }

    function showSEOcontent() {
        $(".item.seofirstmonth").show();
        $(".item.seomonthly").show();
        $(".item.setupfee").show();
        ShowSEO();
    }

    function hideDesigncontent() {
        $(".item.designdeposit").hide();
        $(".item.designpayoff").hide();
        $('select#design').prop('selectedIndex', null);
        $("input#designdeposit").val("0");
        $("input#designpayoff").val("0");
        $("input#designtotal").val("0");
        HideDesign();
    }

    function showDesigncontent() {
        $(".item.designdeposit").show();
        $(".item.designpayoff").show();
        ShowDesign();
    }

    function hideAll() {
        hideSEOcontent();
        hidePriceTable();
        HideDesign();
        HideSE0();
    }

    hideAll();

    $(function () {
        setInterval(constantChecker, 1);
    });

    /// Web Design Package Choices + Pricing /////////////////////////////////////////////////
    function designSelectValues() {
        // Set Default values
        $('select#design').prop('selectedIndex', null);
        //Check for new package choice
        $(designSelect).change(function () {
            if (designSelect.value == "1") {
                $("input#designdeposit").val("1500");
                $("input#designpayoff").val("1500");
                $("input#designtotal").val("3000");
            } else if (designSelect.value == "2") {
                $("input#designdeposit").val("2500");
                $("input#designpayoff").val("2500");
                $("input#designtotal").val("5000");
            } else if (designSelect.value == "3" || designSelect.value == "0" ) {
                $("input#designdeposit").val("0");
                $("input#designpayoff").val("0");
                $("input#designtotal").val("0");
            } else {
                $("input#designdeposit").val("1500");
                $("input#designpayoff").val("1500");
                $("input#designtotal").val("3000");
            }

        });
    }

    /// SEO Package Choices + Pricing /////////////////////////////////////////////////
    function seoSelectValues() {
        // Set Default values
        $('select#seo').prop('selectedIndex', null);
        //Check for new package choice
        $(seoSelect).change(function () {
            if (seoSelect.value == "1") {
                $("input#seosetup").val("500");
                $("input#seovalue").val("750");
            } else if (seoSelect.value == "2") {
                $("input#seosetup").val("1000");
                $("input#seovalue").val("1500");
            } else if (seoSelect.value == "3") {
                $("input#seosetup").val("1500");
                $("input#seovalue").val("2500");
            } else if (seoSelect.value == "4" || seoSelect.value == "0" ) {
                $("input#seosetup").val("0");
                $("input#seovalue").val("0");
            } else {
                $("input#seosetup").val("500");
                $("input#seovalue").val("750");
            }

        });
    }

    // When service added, activate options and values ////////////////////////////////////
    $('#chooseseo').change(function () {
        if (!$('#chooseseo').is(':checked')) {
            hideSEOcontent();
            $("input#seosetup").val("0");
            $("input#seovalue").val("0");

        } else if ($('#chooseseo').is(':checked')) {
            showSEOcontent();
            seoSelectValues();
        }
    });

    $('#choosedesign').change(function () {
        if (!$('#choosedesign').is(':checked')) {
            hideDesigncontent();
            $("input#designdeposit").val("0");
            $("input#designpayoff").val("0");
            $("input#designtotal").val("0");
        } else if ($('#choosedesign').is(':checked')) {
            showDesigncontent();
            designSelectValues();
        }
    });

    // Convert String to US Currency ///////////////////////////////////////////////////////////
    var formatter = new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'USD',
    });

    // Constanly check for new numbers /////////////////////////////////////////////////////////////
    function constantChecker() {
        // Show or Hide Custom Disclaimer ///
//        if ($(seoSelect).val() == "4" || $(designSelect).val() == "3") {
//            $(".disclaimer.custom").show();
//        } else if ($(seoSelect).val() != "4" || $(designSelect).val() != "3") {
//            $(".disclaimer.custom").hide();
//        }

        if (($("select#design")[0].selectedIndex === 0) && ($("select#seo")[0].selectedIndex === 0)) {
            hidePriceTable();
        } 
        else {
            showPriceTable();
        }

        // Get Current Select Values /////
        var currentSeoSetup = $("input#seosetup").val();
        var currentSeoValue = $("input#seovalue").val();
        var currentDesignDeposit = $("input#designdeposit").val();
        var currentDesignPayoff = $("input#designpayoff").val();
        var currentDueToday = formatter.format(+currentDesignDeposit + +currentSeoSetup + +currentSeoValue);
        var currentDueLater = formatter.format(+currentDesignPayoff);
        var currentMonthly = formatter.format(+currentSeoValue);

        // Format individual Items ///
        var seoSetupVal = formatter.format(+currentSeoSetup);
        var seoMonthlyVal = formatter.format(+currentSeoValue);
        var DesignDepositVal = formatter.format(+currentDesignDeposit);
        var DesignPayoffVal = formatter.format(+currentDesignPayoff);

        // Apply Current Values /////
        $(dueToday).text(currentDueToday);
        $(dueLater).text(currentDueLater);
        $(dueMonthly).text(currentMonthly);

        $(".setupfee span#val").text(seoSetupVal);
        $(".seofirstmonth span#val").text(seoMonthlyVal);
        $(".seomonthly span#val").text(seoMonthlyVal);
        $(".designdeposit span#val").text(DesignDepositVal);
        $(".designpayoff span#val").text(DesignPayoffVal);
    }

    /// Submit Button
    $('.packagebuilder').on('submit', function (e) {
        e.preventDefault();
        var formData = $(this).serialize();
        var fullUrl = window.location.href;
        var finalUrl = fullUrl + "?&" + formData;
        //window.location.href = finalUrl;
        alert(finalUrl);
    });
.hidden {
    opacity: 0;
    max-height: 0px;
    transition: max-height 0s cubic-bezier(0, 1, 0, 1) 0s;
    position:absolute;
    top:-100000px;
}

.shown {
    opacity: 1;
    max-height: 1500px;
    transition: max-height 1s ease-in-out 0s;
    position:relative;
}

.packagebuilder {
    max-width: 700px;
    margin: auto;
    box-sizing: border-box;
}

form .services {
    display:
    flex;
    /* grid-gap: 30px; */
    box-sizing: border-box;
    /* padding-bottom: 20px; */
    flex-direction: column;
    width: auto;
}

form .option {display: flex;grid-gap: 10px;border-radius: 20px;padding-top: 30px;flex-direction: column;}

.services label {
    font-size: 22px;
    position: relative;
    color: black;
    font-weight:600!important;
}

.services select {
    padding: 15px!important;
    height: auto;
    font-size: 20px!important;
    padding-right: 45px!important;
    font-weight: 300;
    border-radius: 5px;
    appearance: none;
    -webkit-appearance:none;
    overflow-wrap: break-word;
    background: #ffffff;
    border: solid 2px #e0e0e0!important;
}

.services select {
    background-image: url("https://static1.squarespace.com/static/5ee80dfeb418dc785b48ee76/t/62ec6656067dab5da9df2fa0/1659659862901/angle-down-solid.svg");
    background-size: 20px;
    background-position: right 15px center;
    background-repeat: no-repeat;
}

.services option {}

.services select:focus {
    outline:none!important;
}

.estimate {
    display: flex;
    flex-direction: column;
    /* background: linear-gradient(180deg, #eeeeee, transparent); */
    margin: 30px 0px 20px;
    overflow: hidden;
    border-top: solid 1px #000000;
}

.figure {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0px;
    border-bottom: solid 1px #dedede;
}

.figure span:first-child {
    font-weight:600
}

.figure span:last-child {
    font-size: 20px;
}

.figure:last-child {
    border:none;
}

#val {
    font-weight:600!important;
    padding: 0;
    border-radius: 5px;
}

.today #val {font-size: 30px;}

.figure.today {
    color: black;
}
.figure {
}

.packagebuilder .disclaimer {
    background: #f9f6e6;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: left;
    font-size: 14px;
    grid-gap: 10px;
}

.disclaimer i {
    color: #ff9d00;
    font-size: 20px;
}

.packagebuilder input.package {
    background: #000000!important;
    border: none!important;
    color: white;
    margin-top: 20px!important;
}

.packagebuilder input.package:hover {
    background: var(--mainbrand)!important;
}

label.choose {
    display:
    block;
    line-height:40px;
    height:40px;
    width: fit-content;
    cursor: pointer;
    min-width: 150px;
    font-weight: 300!important;
    pointer-events: all;
    border-radius: 10px;
    -webkit-font-smoothing: antialiased;
    margin-top: 10px;
    font-family:
    Arial,Helvetica,sans-serif;
    color: gray!important;
    text-align:
    center;
    background: #e4e4e4;
    padding: 1px 15px;
    /* box-shadow: 11px 14px 20px #0000001a; */
}

label.add-label {
    font-weight:600;
}

input.choose[type=checkbox] {
    display: none;
}

input.choose:checked + label {
    color: #ffffff!important;
    background:
    var(--mainbrand);
    box-shadow: none;
}

.figure.item {
    padding: 0px 20pxpx;
}

.figure.item span, .item span#val  {
    font-size: 13px;
    font-weight: 300!important;
}

.today.item span#val, .today.item span  {
   color: #656565;
}
.other.item span#val, .other.item span  {
   color:#6c7674;
}

.today.item {
    /* background: #f4f4f4!important; */
}

.other.item {
    /* background: #f4f4f4!important; */
}

/* new stuff */
.packcheck {
    visibility: hidden;
}

input.choose:checked + label .check {
    visibility: visible;
}

input.choose.checkbox:checked + label:before {
    content: "";
}

.addservices {
    padding-bottom: 20px;
    border-bottom: solid 1px #c0c0c0;
}

.flex-options {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    grid-gap: 10px;
}

:root {
    --mainbrand: #006eff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="packagebuilder">
    <div class="services">
    
    <div class="addservices">
    <label class="add-label">Add Services</label>
<div class="flex-options" name="addservices">
    <div>
    <input class="choose" id="chooseseo" type="checkbox" name="chooseseo">
<label for="chooseseo" class="choose">SEO</label>
    </div>
    <div>
    <input class="choose" id="choosedesign" type="checkbox" name="choosedesign">
<label for="choosedesign" class="choose">Web Design</label>
    </div></div></div>
<div class="seo option hidden">
<label for="seo">Pick your SEO Package</label>
    <select type="text" id="seo" name="seo">
       <option value="0" disabled selected value>-- Select an Option --</option>
      <option value="1" class="one">Gold – $750 per month, $500 setup fee</option>
      <option value="2">Essentials – $1500 per month, $1000 setup fee</option>
      <option value="3">Local Authority – $2500 per month, $1500 setup fee</option>
    </select>
    </div>
       <div class="design option hidden">
  <label for="design">Pick your Design Package</label>
    <select type="text" id="design" name="design">
      <option value="0"  disabled selected value>-- Select an Option --</option>
      <option value="1">Vanity – $3000, $1500 deposit</option>
      <option value="2">Lux – $5000, $2500 deposit</option>
    </select>
       </div>
    </div><div class="estimate hidden">
    <span class="figure today"><span>Due Today: </span><span id="val"></span>
</span><span class="figure today item setupfee" style="display:none;"><span style="">SEO Setup Fee</span><span id="val" style=""></span></span>
        <span class="figure today item seofirstmonth" style="display:none;"><span style="">SEO First Month</span><span id="val" style=""></span></span><span class="figure today item designdeposit" style="display:none;"><span style="">Web Design 50% Deposit</span><span id="val" style=""></span></span><span class="figure later"><span>Due Later: </span><span id="val"></span></span><span class="figure other item designpayoff" style="display:none;"><span style="">Web Design Payoff</span><span id="val" style=""></span></span>
        <span class="figure monthly"><span>Recurring Starting Next Month: </span><span id="val"></span></span><span class="figure other item seomonthly" style="display:none;"><span style="">SEO Monthly Fee</span><span id="val" style=""></span></span>
    </div>
<div class="disclaimer pricing hidden"><i class="fas fa-exclamation-circle"></i>This is only an estimate before the final proposal. The final pricing will be reflected on an e-signature agreement we will send you.</div>
 <div class="disclaimer custom" style="
    display: none;
"><i class="fas fa-exclamation-circle"></i>Since you chose "Custom" on one of the options, the numbers may not reflect what you have discussed with us. Only choose this option if you spoke with us about a custom package prior.</div><input type="hidden" id="seovalue" name="seovalue" value="">
<input type="hidden" id="seosetup" name="seosetup" value=""><input type="hidden" id="designdeposit" name="designdeposit" value=""><input type="hidden" id="designpayoff" name="designpayoff" value="">
<input type="hidden" id="designtotal" name="designtotal" value=""><input type="submit" value="Continue" class="button package hidden">
</form>

css-transitions css html jquery javascript
0 Answers
Related