Объединение характеристик и описания

[helen2014]

Всем доброго дня.

Стучусь за помощью.

1.___

Я перенес описание к характеристикам

Получилось так:

Спойлер

    <?php if(isset($cyber_product_page_tabs) && $cyber_product_page_tabs !='1') { ?>
    <div class="tabs-product col-sm-12">
    <ul class="nav nav-tabs my-tabs">
      <?php if ($attribute_groups) { ?>
        <li class="active"><a href="#tab-specification" data-toggle="tab"><?php echo $tab_attribute; ?></a></li>
      <?php } ?>
      <?php if(isset($qadata['status'])){ ?>
        <li><a href="#tab-question-answer" data-toggle="tab"><?php echo $tab_question_answer; ?></a></li>
      <?php } ?>
      <?php if (isset($product_additional_tabs)) { ?>
      <?php $additional_tab_i=0; foreach ($product_additional_tabs as $product_additional_tab) { ?>
        <li><a href="#product_additional_tabs<?php echo $additional_tab_i; ?>" data-toggle="tab"><i class="<?php echo $product_additional_tab['icon_tabs'];?>"></i> <?php echo $product_additional_tab['title']; ?></a></li>
      <?php $additional_tab_i++; } ?>
      <?php } ?>
    </ul>
    <div class="tab-content">
            <?php if ($attribute_groups) { ?>
            <div class="tab-pane active" id="tab-specification">
            <div class="attribute_block col-xs-12 col-sm-12 col-md-12 col-lg-6">
            <div class="content_block_attribute hide_attribute">
            <table class="table table-bordered">
                <?php foreach ($attribute_groups as $attribute_group) { ?>
                <thead>
                  <tr>
                    <td colspan="2"><strong><?php echo $attribute_group['name']; ?></strong></td>
                  </tr>
                </thead>
                <tbody>
                  <?php foreach ($attribute_group['attribute'] as $attribute) { ?>
                  <tr itemprop="additionalProperty" itemscope itemtype="http://schema.org/PropertyValue">
                    <td itemprop="name"><?php echo $attribute['name']; ?></td>
                    <td itemprop="value"><?php echo $attribute['text']; ?></td>
                  </tr>
                  <?php } ?>
                </tbody>
                <?php } ?>
              </table>             
            </div>
            
            <a class="content_toggle_attribute" href="#">Подробнее</a>
            </div>
            
            <script>
               $(document).ready(function(){
               $('.content_toggle_attribute').click(function(){
               $('.content_block_attribute').toggleClass('hide_attribute');    
               if ($('.content_block_attribute').hasClass('hide_attribute')) {
               $('.content_toggle_attribute').html('Подробнее');
               } else {
               $('.content_toggle_attribute').html('Скрыть');
               }        
               return false;
               });                
               });
            </script>
            
            <?php if (strip_tags($description)) { ?>
            <div class="description_block col-xs-12 col-sm-12 col-md-12 col-lg-6">
            <div class="content_block_description hide_description">
            <div class="tab-pane" id="tab-description" itemprop="description"><?php echo $description; ?></div>
            </div>
            <a class="content_toggle_description" href="#">Подробнее</a>
            
            <script>
               $(document).ready(function(){
               $('.content_toggle_description').click(function(){
               $('.content_block_description').toggleClass('hide_description');    
               if ($('.content_block_description').hasClass('hide_description')) {
               $('.content_toggle_description').html('Подробнее');
               } else {
               $('.content_toggle_description').html('Скрыть');
               }        
               return false;
               });                
               });
            </script>
            
            </div>
            <?php } ?>

            </div>
            <?php } ?>

Обернул в

<div class="attribute_block col-xs-12 col-sm-12 col-md-12 col-lg-6">

Содержимое с атрибутами

</div>

<div class="description_block col-xs-12 col-sm-12 col-md-12 col-lg-12 col-lg-6">

Содиржимое с описанием

</div>

 

Блок с описание скрывается если в нем нет описания.

Но вот плок с атрибутами так и остается

media (min-width:1200px) {
 .col-lg-6 {
  width:50%
 }

 

Нужно сделать что бы при отсутствии блока с описанием.

Блок с атрибутами раздвигался на 100%.

 

Может это можно сделать как то скриптом?

Или есть другие варианты?

Помогите!

 

2.___

Все в тех же атрибутах и описании.

Я ограничил блоки по высоте и добавил кнопки Подробнее на оба блока.

Что бы выравнить блоки.

css

.content_block_attribute,
.content_block_description {
    overflow: hidden;
    position: relative;    
}
.content_block_attribute.hide_attribute,
.content_block_description.hide_description {
    height: 400px;
    display: block !important;
}

js  (пример с кнопки атрибутов)

            <script>
               $(document).ready(function(){
               $('.content_toggle_attribute').click(function(){
               $('.content_block_attribute').toggleClass('hide_attribute');    
               if ($('.content_block_attribute').hasClass('hide_attribute')) {
               $('.content_toggle_attribute').html('Подробнее');
               } else {
               $('.content_toggle_attribute').html('Скрыть');
               }        
               return false;
               });                
               });
            </script>

 

Как я уже говорил выше что блоки ограничены по высоте.

Нужно сделать так чтобы кнопки не выводились если высота меньше чем задана.

Готов оплать! Пишите в лс.

[Otvet]

https://html5book.ru/css3-flexbox/

[whiteblue]

2 часа назад, helen2014 сказал:

Всем доброго дня.

Стучусь за помощью.

1.___

Я перенес описание к характеристикам

Получилось так:

  Показать контент

    <?php if(isset($cyber_product_page_tabs) && $cyber_product_page_tabs !='1') { ?>
    <div class="tabs-product col-sm-12">
    <ul class="nav nav-tabs my-tabs">
      <?php if ($attribute_groups) { ?>
        <li class="active"><a href="#tab-specification" data-toggle="tab"><?php echo $tab_attribute; ?></a></li>
      <?php } ?>
      <?php if(isset($qadata['status'])){ ?>
        <li><a href="#tab-question-answer" data-toggle="tab"><?php echo $tab_question_answer; ?></a></li>
      <?php } ?>
      <?php if (isset($product_additional_tabs)) { ?>
      <?php $additional_tab_i=0; foreach ($product_additional_tabs as $product_additional_tab) { ?>
        <li><a href="#product_additional_tabs<?php echo $additional_tab_i; ?>" data-toggle="tab"><i class="<?php echo $product_additional_tab['icon_tabs'];?>"></i> <?php echo $product_additional_tab['title']; ?></a></li>
      <?php $additional_tab_i++; } ?>
      <?php } ?>
    </ul>
    <div class="tab-content">
            <?php if ($attribute_groups) { ?>
            <div class="tab-pane active" id="tab-specification">
            <div class="attribute_block col-xs-12 col-sm-12 col-md-12 col-lg-6">
            <div class="content_block_attribute hide_attribute">
            <table class="table table-bordered">
                <?php foreach ($attribute_groups as $attribute_group) { ?>
                <thead>
                  <tr>
                    <td colspan="2"><strong><?php echo $attribute_group['name']; ?></strong></td>
                  </tr>
                </thead>
                <tbody>
                  <?php foreach ($attribute_group['attribute'] as $attribute) { ?>
                  <tr itemprop="additionalProperty" itemscope itemtype="http://schema.org/PropertyValue">
                    <td itemprop="name"><?php echo $attribute['name']; ?></td>
                    <td itemprop="value"><?php echo $attribute['text']; ?></td>
                  </tr>
                  <?php } ?>
                </tbody>
                <?php } ?>
              </table>             
            </div>
            
            <a class="content_toggle_attribute" href="#">Подробнее</a>
            </div>
            
            <script>
               $(document).ready(function(){
               $('.content_toggle_attribute').click(function(){
               $('.content_block_attribute').toggleClass('hide_attribute');    
               if ($('.content_block_attribute').hasClass('hide_attribute')) {
               $('.content_toggle_attribute').html('Подробнее');
               } else {
               $('.content_toggle_attribute').html('Скрыть');
               }        
               return false;
               });                
               });
            </script>
            
            <?php if (strip_tags($description)) { ?>
            <div class="description_block col-xs-12 col-sm-12 col-md-12 col-lg-6">
            <div class="content_block_description hide_description">
            <div class="tab-pane" id="tab-description" itemprop="description"><?php echo $description; ?></div>
            </div>
            <a class="content_toggle_description" href="#">Подробнее</a>
            
            <script>
               $(document).ready(function(){
               $('.content_toggle_description').click(function(){
               $('.content_block_description').toggleClass('hide_description');    
               if ($('.content_block_description').hasClass('hide_description')) {
               $('.content_toggle_description').html('Подробнее');
               } else {
               $('.content_toggle_description').html('Скрыть');
               }        
               return false;
               });                
               });
            </script>
            
            </div>
            <?php } ?>

            </div>
            <?php } ?>

Обернул в

<div class="attribute_block col-xs-12 col-sm-12 col-md-12 col-lg-6">

Содержимое с атрибутами

</div>

<div class="description_block col-xs-12 col-sm-12 col-md-12 col-lg-12 col-lg-6">

Содиржимое с описанием

</div>

 

Блок с описание скрывается если в нем нет описания.

Но вот плок с атрибутами так и остается

media (min-width:1200px) {
 .col-lg-6 {
  width:50%
 }

 

Нужно сделать что бы при отсутствии блока с описанием.

Блок с атрибутами раздвигался на 100%.

 

Может это можно сделать как то скриптом?

Или есть другие варианты?

Помогите!

 

2.___

Все в тех же атрибутах и описании.

Я ограничил блоки по высоте и добавил кнопки Подробнее на оба блока.

Что бы выравнить блоки.

css

.content_block_attribute,
.content_block_description {
    overflow: hidden;
    position: relative;    
}
.content_block_attribute.hide_attribute,
.content_block_description.hide_description {
    height: 400px;
    display: block !important;
}

js  (пример с кнопки атрибутов)

            <script>
               $(document).ready(function(){
               $('.content_toggle_attribute').click(function(){
               $('.content_block_attribute').toggleClass('hide_attribute');    
               if ($('.content_block_attribute').hasClass('hide_attribute')) {
               $('.content_toggle_attribute').html('Подробнее');
               } else {
               $('.content_toggle_attribute').html('Скрыть');
               }        
               return false;
               });                
               });
            </script>

 

Как я уже говорил выше что блоки ограничены по высоте.

Нужно сделать так чтобы кнопки не выводились если высота меньше чем задана.

Готов оплать! Пишите в лс.

 

модуль + настройка 10 долл

[helen2014]

Не хочу использовать дополнения.

Толь правки в самом продукт.тпл

Змінено 8 грудня 2020 користувачем helen2014

[helen2014]

2 часа назад, Otvet сказал:

https://html5book.ru/css3-flexbox/

Для меня сложновато пока.

Если можете сделать, пишите в ЛС.