Faced with a lack of understanding of what the height of the elements with dislpay: none ;
I will give an example from the work:
// Button what add slide effect for product characteristics function hideButtonsMoreCharacteristicsIfWeHaveBitChatacteristics() { $(".main-descript-tab__fullTab").each(function(index, el) { // var heightField =; var innerHeight = el.scrollHeight; console.log($(".main-descript-tab").height() + " = heightField"); if (((el.scrollHeight < $(".main-descript-tab").height()) && (el.scrollHeight !== 0))) { // console.log(innerHeight + " = innerHeight"); $(this).parent(".main-descript-tab").siblings(".main-desc__showMoreInfo").addClass("hidden"); $(this).parent(".main-descript-tab").css("height", "auto"); } }); } hideButtonsMoreCharacteristicsIfWeHaveBitChatacteristics(); function switchMainDescription() { var mainDescriptionItem = $(".main-desc-title__item"), mainDescriptionContent = $(".main-desc__item"), active = "active"; mainDescriptionItem.on("click", function() { mainDescriptionItem.removeClass(active); $(this).addClass("active"); var index = $('.main-desc-title__item.active').index(); mainDescriptionContent.removeClass(active); mainDescriptionContent.eq(index).addClass(active); hideButtonsMoreCharacteristicsIfWeHaveBitChatacteristics(); }); } switchMainDescription(); function showMoreCharacteristics() { // Slide effect var buttonMoreInformation = $(".main-desc__showMoreInfo"), fieldDescriptionActive = "main-descript-tab_active", textShowInfo = ".main-desc__showMoreInfo_show", textHideInfo = ".main-desc__showMoreInfo_hide"; buttonMoreInformation.on("click", function() { $(this).siblings(".main-descript-tab").toggleClass(fieldDescriptionActive); $(this).children(textHideInfo).toggleClass("hidden"); $(this).children(textShowInfo).toggleClass("hidden"); }) } showMoreCharacteristics(); // FORM Review var buttonAddComment = $(".code_addReview"), formReview = $(".code_formRewiew"); buttonAddComment.on("click", function() { $(this).hide(); formReview.slideDown(600); }); ul { list-style-type: none; } #form-review { display: none; } .card-main-desc-wrap { margin-bottom: 5px; } .min-title { font-size: 24px; font-weight: 600; } .product-line__title { margin-bottom: 35px; } .products_related, .products_looked { width: 100%; margin: 0 16px; } .good-price { display: inline-block; } .goods-item-slid .good-price__hist { font-size: 14px; } .goods-item-slid .good-price__yy, .goods-item-slid .good-price__nom { font-size: 16px; -webkit-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; transform-origin: 100% 100%; } .goods-item-slid .good-price__hist { margin-right: 10px; } .goods-item-slid .good-price__hist:before { bottom: 0.35em; } .goods-item-slid__title { overflow: hidden; height: 32px; margin-bottom: 12px; } .goods-item-slid__price { margin-bottom: 12px; } .name-product { font-size: 14px; text-align: center; line-height: 1.2; display: block; } .main-page__product-line { padding-bottom: 40px; } .goods-item-slid__img { padding-bottom: 100%; position: relative; margin-bottom: 12px; } .goods-item-slid__pic { position: absolute; width: 100%; height: 100%; object-fit: cover; left: 0; top: 0; } .product-line__item { margin-bottom: 35px; } .product-line__item:nth-last-of-type(1) { margin-bottom: 0 !important; } #cart .dropdown-menu { min-width: initial; } .list-group { border: none; box-shadow: none; } .list-group-item { padding: 0; border: none; background-color: transparent; } .list-group a { border: none; padding: 0; } .list-group a:hover { color: #ff4e54; border: none; background: none; box-shadow: none; } .panel-default>.panel-heading { background: none; border: none; } .panel { box-shadow: none; background: none; border: none; } .panel-default { border: none; } .tab-desc { display: none; } .tab-desc.active { display: block; } .info-desc-text__item { padding: 20px; } .descript-tab { width: 100%; min-height: 150px; font-size: 14px; line-height: 1.2; } .descript-tab>* { margin-bottom: 20px; } .descript-tab>*:last-child { margin: 0; } .main-desc-title { display: -webkit-flex; display: -ms-flexbox; display: flex; border-bottom: 2px solid #ff4e54; } .main-desc-title__item { font-size: 20px; width: 260px; text-align: center; padding: 12px; background-color: #f4f4f4; margin-right: 2px; cursor: pointer; } .main-desc-title__item:last-child { margin-right: 0; } .main-desc-title__item.active { background-color: #ff4e54; color: #fff; } .main-desc__item { padding: 20px; } .main__card-product { margin-bottom: 10px; } .main__card-product:after { content: ''; display: table; clear: both; } .card-product__galery { float: left; } .main-descript-tab { position: relative; display: block; width: 100%; height: 228px; overflow: hidden; } .main-descript-tab_active { height: auto !important; } .main-descript-tab p { margin-top: 5px; font-size: 16px; } .main-descript-tab li { padding: 8px 30px 8px 40px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; font-size: 16px; } .main-descript-tab li:nth-child(odd) { background-color: #f4f4f4; } .main-descript-tab li span { -webkit-flex: 1; -ms-flex: 1; flex: 1; max-width: 180px; margin-right: 40px; } .main-descript-tab li span:last-child { margin-right: 0; max-width: 100%; } .main-desc__showMoreInfo { display: block; position: relative; width: 260px; margin-top: 6px; padding: 10px 10px 10px 30px; color: #fff; background-color: #ff4e54; } .main-desc__showMoreInfo_show { margin-left: -18px; } .main-desc__showMoreInfo_show:after { position: absolute; top: 10px; right: 6px; content: "\f103"; font-family: "FontAwesome"; font-size: 15px; color: inherit; } .main-desc__showMoreInfo_hide:after { position: absolute; top: 10px; right: 10px; content: "\f00d"; font-family: "FontAwesome"; font-size: 15px; color: inherit; } .bl_review { height: 100%; margin-top: 10px; margin-left: 10px; border-left: 1px solid #ff4e54; } .review_item { margin-top: 10px; width: 100%; padding: 10px; box-sizing: border-box; border-left: 1px solid #ff4e54; } .review_item__userName { display: inline-block; padding-bottom: 4px; border-bottom: 2px solid #ff4e54; font-family: TahomaBold, sans-serif; color: #333; font-size: 18px; } .review_item__time { float: right; display: inline-block; } .review_item__raiting { margin-top: 10px; text-decoration: underline; } .personal-form-review { clear: both; margin-top: 15px; } .review_item__fullReview { margin-top: 10px; } .review_product { width: 100%; margin: 24px auto; text-align: center; } .review_product__title { display: inline; font-family: "Tahoma", sans-serif; font-size: 24px; } .review_product__title__bold { font-family: TahomaBold, sans-serif; } .bl_raiting__chackbox { position: absolute; visibility: hidden; } .my_button-review { clear: both; margin-top: 10px; padding: 10px; border-radius: 4px; color: #fff; background-color: #ff4e54; } .my_button-review:hover { color: #fff; text-decoration: underline; } .main-desc__showMoreInfo { display: block; position: relative; width: 260px; margin-top: 6px; padding: 10px 10px 10px 30px; color: #fff; background-color: #ff4e54; } .main-desc__showMoreInfo_show { margin-left: -18px; } .main-desc__showMoreInfo_show:after { position: absolute; top: 10px; right: 6px; content: "\f103"; font-family: "FontAwesome"; font-size: 15px; color: inherit; } .main-desc__showMoreInfo_hide:after { position: absolute; top: 10px; right: 10px; content: "\f00d"; font-family: "FontAwesome"; font-size: 15px; color: inherit; } <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="card-main-desc-wrap"> <div class="main-desc tab-wrap"> <ul class="main-desc-title"> <li class="main-desc-title__item tab-title "> Описание </li> <li class="main-desc-title__item tab-title active"> Характеристики </li> <li class="main-desc-title__item tab-title "> Отзывы </li> </ul> <div class="main-desc-text"> <div class="main-desc__item tab-desc "> <div class="wrapperBlock"> <div class="main-descript-tab "> <div class="main-descript-tab__fullTab"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, quia?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, quia? Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, quia? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque doloribus illo impedit modi molestias, recusandae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, quia? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, nulla?</p> </div> </div> <button class="main-desc__showMoreInfo"> <span class="main-desc__showMoreInfo_show">Показать больше информации</span> <span class="main-desc__showMoreInfo_hide hidden">Скрыть информацию</span> </button> </div> </div> <div class="main-desc__item tab-desc active"> <div class="wrapperBlock"> <div class="main-descript-tab"> <ul class="main-descript-tab__fullTab"> <li> <span>Страна производитель:</span> <span>Украина</span> </li> <li> <span>Материал</span> <span>натуральная кожа</span> </li> <li> <span>Код производителя:</span> <span>170550-BM</span> </li> </ul> </div> <button class="main-desc__showMoreInfo"> <span class="main-desc__showMoreInfo_show">Показать больше информации</span> <span class="main-desc__showMoreInfo_hide hidden">Скрыть информацию</span> </button> </div> </div> <div class="main-desc__item tab-desc " id="tab-review"> <div class="main-descript-tab"> <div class="main-descript-tab__fullTab"> <div id="review" class="hidden"> <p>У данного товара пока нету отзывов, будь первым </p> </div> <div class="review_item"> <p class="review_item__userName">User Name</p> <time class="review_item__time">01.08.2017</time> <p class="review_item__raiting"><span>Рейтинг пользователя</span> <span>4</span><span>/5</span></p> <p class="review_item__fullReview"> <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A consectetur eos laborum magni quam quod ratione repudiandae suscipit tempora veniam! Aspernatur, atque corporis dignissimos minima nam officia provident quasi quia!</span> <span>Alias, amet autem cum cumque delectus, deleniti dignissimos doloribus dolorum facilis illum incidunt iure iusto, laboriosam laborum maxime minus natus necessitatibus perspiciatis quaerat quis repellendus saepe sed similique suscipit unde!</span> </p> </div> </div> </div> <button class="main-desc__showMoreInfo"> <span class="main-desc__showMoreInfo_show">Показать больше информации</span> <span class="main-desc__showMoreInfo_hide hidden">Скрыть информацию</span> </button> <button class="my_button-review code_addReview"> <span class="button_review">Оставить отзыв о товаре</span> <i class="fa fa-bookmark" aria-hidden="true"></i> </button> <form class="form-horizontal personal-form-review code_formRewiew" id="form-review"> <div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> Пожалуйста, выберите оценку товара! </div> <div class="col-xs-12 review_product"> <p class="review_product__title">Написать отзыв о</p> <h2 class="review_product__title review_product__title__bold">Женская сумка Karfei 1710078-04A черная</h2> </div> <div class="form-group required review_form clearfix"> <div class="col-sm-6"> <input class="form-control review_name" type="text" name="name" value="" placeholder="*Ваше имя:"> </div> <div class="col-sm-6"> <input class="form-control review_email" type="email" name="name" value="" placeholder="Email:"> </div> <div class="col-sm-6"> <input class="form-control review_telephone" type="tel" name="name" value="" placeholder="Ваш телефон:"> </div> <div class="col-sm-6"> <div class="bl_review__raiting"> <span class="review_text">Оценить товар</span> <div class="bl_review__raitingFull"> <input class="bl_raiting__chackbox" id="review_star5" type="radio" name="raiting" value="5"> <label class="bl_raiting__label" for="review_star5"></label> <input class="bl_raiting__chackbox" id="review_star4" type="radio" name="raiting" value="4"> <label class="bl_raiting__label" for="review_star4"></label> <input class="bl_raiting__chackbox" id="review_star3" type="radio" name="raiting" value="3"> <label class="bl_raiting__label" for="review_star3"></label> <input class="bl_raiting__chackbox" id="review_star2" type="radio" name="raiting" value="2"> <label class="bl_raiting__label" for="review_star2"></label> <input class="bl_raiting__chackbox" id="review_star1" type="radio" name="raiting" value="1"> <label class="bl_raiting__label" for="review_star1"></label> </div> </div> </div> </div> <div class="form-group required"> <div class="col-sm-12"> <textarea class="form-control review_textarea" name="text" rows="5" id="input-review" placeholder="Текст сообщения"></textarea> </div> </div> <button class="button_lim clearfix" type="button" id="button-review" data-loading-text="Загрузка..."> <span class="button_lim__text">Отправить</span> </button> </form> </div> </div> </div> </div> https://jsfiddle.net/v92g2bdj/1/ There are 3 switches Description Specifications and Reviews. The task is to display the Show more information button only if the content in this section is typed> = 228px (the wrapper .main-descript-tab class is responsible for this) Actually, all of my actions are performed by the hideButtonsMoreCharacteristicsIfWeHaveBitChatacteristics(); It works the first time you load the page, and the second when you click on the desired heading. Actually bug - Initially the Characteristics heading is activated, and if you continue to go to the Reviews, then the function will work correctly. But if you initially go to the Description and then to Reviews, then everything breaks down (it displays the Show more information button, although there is not so much content there).
In the console, I bring the length of the elements. In the first case, it works right. In the second they go to zero and the function does not work. Please tell me how to fix?
