Доброго времени суток, суть проблемы состоит в том, чтобы при клике на #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>
