Показать сообщение отдельно
  #1 (permalink)  
Старый 23.07.2019, 11:29
Интересующийся
Отправить личное сообщение для CORONER Посмотреть профиль Найти все сообщения от CORONER
 
Регистрация: 27.02.2018
Сообщений: 22

Закрытие открытого блока при клике на другой
Доброго времени суток, суть проблемы состоит в том, чтобы при клике на #trigger2 открывался #box2, при клике на #trigger3 - #box2 закрывался и открывался #box3, аналогично с #box4, при клике вне блоков #box2,3,4 закрытие этих блоков, но тут возникает проблема, что собственно триггеры будут областью вне дива box и соотвественно не откроются.

Спасибо за внимание! С уважением, Coroner.

Демо


<div class="advanced">
            
              <a href='#' id='trigger2'> <article>
            <img src="img/discount.png">
                <span>
                акции на товары недели
                </span>
                <p>скидки до -50%</p>
                  </article></a>
          <a href='#' id='trigger3'><article>
            <img src="img/box.png">
                <span>
                акции на товары недели
                </span>
                <p>скидки до -50%</p>
              </article></a>
        
          <a href='#' id='trigger4'><article>
            <img src="img/cards.png">
                <span>
                акции на товары недели
                </span>
                <p>скидки до -50%</p>
              </article></a>
     
 <div id='box2' style='display: none;'>   
   Кофеман 24 - это крупнейшее в России производство снеков и кондитерских изделий, а также мощное логистическое звено: у холдинга свои склады, распределительные центры и свой автопарк. Именно такой подход к организации бизнес-процессов позволяет KDV держать демократичные цены на свою продукцию. А покупая ее напрямую у производителя – в интернет-магазине KDV, вы приобретаете товар по привлекательным ценам.
     </div> 
             <div id='box3' style='display: none;'>   
     Кофеман 24 - это крупнейшее в России производство снеков и кондитерских изделий, а также мощное логистическое звено: у холдинга свои склады, распределительные центры и свой автопарк. Именно такой подход к организации бизнес-процессов позволяет KDV держать демократичные цены на свою продукцию. А покупая ее напрямую у производителя – в интернет-магазине KDV, вы приобретаете товар по привлекательным ценам.
     </div> 
             <div id='box4' style='display: none;'>   
     Кофеман 24 - это крупнейшее в России производство снеков и кондитерских изделий, а также мощное логистическое звено: у холдинга свои склады, распределительные центры и свой автопарк. Именно такой подход к организации бизнес-процессов позволяет KDV держать демократичные цены на свою продукцию. А покупая ее напрямую у производителя – в интернет-магазине KDV, вы приобретаете товар по привлекательным ценам.
     </div> 

</div>



<script type='text/javascript'> 
    $(document).ready(function() { 
      $("A#trigger2").toggle(function() { 
        // Отображаем скрытый блок 
        $("DIV#box2").fadeIn(); // fadeIn - плавное появление
        return false; // не производить переход по ссылке
      },  
      function() { 
        // Скрываем блок 
        $("DIV#box2").fadeOut(); // fadeOut - плавное исчезновение 
        return false; // не производить переход по ссылке
      }); // end of toggle() 
    }); // end of ready() 
  </script> 
  
    
    
         <script type='text/javascript'> 
    $(document).ready(function() { 
      $("A#trigger3").toggle(function() { 
        // Отображаем скрытый блок 
        $("DIV#box3").fadeIn(); // fadeIn - плавное появление
        return false; // не производить переход по ссылке
      },  
      function() { 
        // Скрываем блок 
        $("DIV#box3").fadeOut(); // fadeOut - плавное исчезновение 
        return false; // не производить переход по ссылке
      }); // end of toggle() 
    }); // end of ready() 
  </script> 

    
    
         <script type='text/javascript'> 
    $(document).ready(function() { 
      $("A#trigger4").toggle(function() { 
        // Отображаем скрытый блок 
        $("DIV#box4").fadeIn(); // fadeIn - плавное появление
        return false; // не производить переход по ссылке
      },  
      function() { 
        // Скрываем блок 
        $("DIV#box4").fadeOut(); // fadeOut - плавное исчезновение 
        return false; // не производить переход по ссылке
      }); // end of toggle() 
    }); // end of ready() 
  </script>
Ответить с цитированием