Javascript-форум - Как сделать чтобы не закрывать актиыный див при открытии другого дива

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Как сделать чтобы не закрывать актиыный див при открытии другого дива (https://javascript.ru/forum/misc/30948-kak-sdelat-chtoby-ne-zakryvat-aktiynyjj-div-pri-otkrytii-drugogo-diva.html)

Deff, и чуть не забыл первый сектор можно не оставлять активным а в свернутом состоянии чтобы было изначально.

Deff,
жду ответа.

dimas15,

<!DOCTYPE html>
  <html>
    <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <title> - jsFiddle demo</title>
      <script type="text/javascript" src="/js/lib/mootools-core-1.4.5-nocompat.js"></script>
      <link rel="stylesheet" type="text/css" href="/css/normalize.css">
      <link rel="stylesheet" type="text/css" href="/css/result-light.css">
      <style type="text/css">
    #wrap { width: 100%; margin: 200px auto; }
#accordion h3.head
{   
    border:1px solid #E0E0E0;
    margin: 4px 0 -2px 0; padding: 5px 10px;
    clear: left;
    color: #A52A2A;
    font-size: 20px;
    font-weight:normal;
    padding:0px;
    text-align: center;
    cursor: pointer;
    
    border-radius: 3px;
    -o-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    
    /*text-shadow: 1px 1px 0px #000;
    -o-text-shadow: 1px 1px 0px #000;
    -moz-text-shadow: 1px 1px 0px #000;
    -webkit-text-shadow: 1px 1px 0px #000;*/
}

#accordion h3.active
{
    background: #CCCCCC; 
}

#accordion div.big_blocks
{
    padding: 10px; margin: 0;

    border-radius: 3px;
    -o-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;    
      box-shadow: 3px 1px 4px rgba(0, 0, 0, 0.2), 0 0 40px rgba(0, 0, 0, 0.1) inset;
 /* background: none repeat scroll 0 0 #EFEFEF;*/

    float: left;
    margin: 5px 5px 5px 0;
     padding: 10px 0 20px 20px;
    width: 98%;
}

  #accordion div.big_blocks ul{/*стиль li наследуется стандартно*/
font-size: 15px;
margin-left: 100px; 
text-align: left;
margin-top: 13px;
}
#accordion div.big_blocks ul span{
color: #005058;
    font-size: 17px;
    margin-left: -31px;
}
#accordion div.big_blocks ul li{
line-height:-0.7pxpx;
}
#accordion div.blocks_littles{
     float: left;
    height: 187px;
    margin: 10px 10px 0px 0;
    padding: 5px;
    width: 260px;
    background:#ffffff;
    border: 1px dashed #CCCCCC;
   
}
#accordion div.blocks_littles p{
 color: #005058;
    font-size: 18px;
    font-weight: normal;
    margin: -2px;
  padding: 0 0 4px 4px;
   text-align: center;
    line-height: normal;
    &lt;!-- border-bottom: 1px solid #CCCCCC;-->
     
}
#accordion div.blocks_littles img{
      float: left;
    margin: 9px 4px;
padding:3px 2px -1px 5px;
/*border: 1px dashed #CCCCCC;*/
}
  </style>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
      <script type="text/javascript" src="accordion.js"></script>
      <script type="text/javascript">
$(document).ready(function(){

$('#accordion div.big_blocks:not(:first)').hide();
$('h3.head:first').addClass('active');

  $('h3.head:not(.active)').live('click',function(){
    $(this).addClass('active');
    $(this).next().slideDown(760);
  });

  $('h3.head.active').live('click',function(){
    $(this).removeClass('active');
    $(this).next().slideUp(760);
  });

});
</script>
    </head>
 <body>

Вот весь хидер

Цитата:

Вот эти два скрипта

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
      <script type="text/javascript" src="accordion.js"></script>

Переставил - увидите

============
*Поправил

Deff,
у меня почему то блоки друг на друга наезжают при открытии?

Deff,
И они сами закрываются а не при клике...(

Цитата:

Сообщение от dimas15

у меня почему то блоки друг на друга наезжают при открытии?

Выложите полный код заново

dimas15,
У меня лично так(стиль не загружал) http://hostjs-mybb2011.narod.ru/dimas15.htm

Deff,
// Когда страница полностью загружена
$(window).ready(function()
{
// запоминаем высоту и отступы каждого блока
$('#accordion > div').each(function()
{
$(this).data('height', $(this).height());
$(this).data('padding-top', $(this).css('padding-top'));
$(this).data('padding-bottom', $(this).css('padding-bottom'));
});

// Скрываем все секции кроме первой
$('#accordion > div:not(:first)').hide();
// Делаем первую секцию активной
$('#accordion h3:first, #accordion div:first').addClass('active');
// Если пользователь кликнул на секцию
$('#accordion > h3').click(function()
{
// Сбрасываем все секции
if ($(this).hasClass('active')) {
$(this).removeClass('active');
$('#accordion > div:visible').animate({height: 0, 'padding-top': 0, 'padding-bottom': 0}, 500, function() { $(this).hide() } );
}
else {
// Делаем активной на которую кликнули
$(this).addClass('active');
box = $(this).next().addClass('active');
$(box).animate(
{
height: $(box).data('height'),
'padding-top': $(box).data('padding-top'),
'padding-bottom': $(box).data('padding-bottom')
}, 500);
}
});
});

Deff,
это был скрипт

Deff,
<html>
<head>
<title></title>
<link href="base.css" rel="stylesheet" type="text/css" />
<link href="accordion.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="accordion.js"></script>
</head>
<body>
<div id="wrap">
<div id="accordion">
<h3 class="head">Листогибочное оборудование</h3>
<div class="big_blocks">
<div class="blocks_littles">
<p>Листогибочные прессы</p>
<img src="../upload/test_metall/list_press.jpg" alt="" width="100" height="137" />
<ul>
<li><a href="catalog/category/press_phe/">DENER MAKINA</a></li>
<li>AMADA</li>
</ul>
</div>
<div class="blocks_littles">
<p>Листогибочные машины</p>
<img src="../upload/test_metall/listabgib_mash.jpg" alt="" width="100" height="137" />
<ul>
<li>IMCAR</li>
<li><a href="catalog/category/918/">HACO</a></li>
<li><a href="catalog/category/bendmak/">BENDMAK</a></li>
</ul>
</div>
<div class="blocks_littles">
<p>Листогибочный инструмент</p>
<img src="../upload/test_metall/list_s_pov_balk.jpg" alt="" width="100" height="137" />
<ul>
<li><a href="catalog/category/641/">ROLLERI</a></li>
<li>EURAM</li>
<li>EUROSTAMP</li>
</ul>
</div>
<div class="blocks_littles">
<p>Листогибы с поворотной балкой</p>
<img src="../upload/test_metall/s_pov_balk.jpg" alt="" width="100" height="137" />
<ul>
<span>Ручные:</span><br />
<li><a href="catalog/category/listogiby_ruchnye/">AYSANMAK</a></li>
<br /> <span>Электрические:</span><br />
<li><a href="catalog/category/jordi/">DENER MAKINA</a></li>
</ul>
</div>
<div class="blocks_littles">
<p>Прoбивочный инструмент</p>
<img src="../upload/test_metall/prib_instrum.jpg" alt="" width="100" height="137" />
<ul>
<li><a href="catalog/category/634/">SU.CE</a></li>
</ul>
</div>
</div>

<h3 class="head">Металлорежущее оборудование</h3>
<div class="big_blocks">
<div class="blocks_littles">
<p>Токарные станки</p>
<img src="../upload/test_metall/tok_st.jpg" alt="" width="100" height="137" />
<ul>
<li><a href="catalog/category/673/">СAMPRO</a></li>
<li><a href="catalog/category/656/">TRENS</a></li>
<li><a href="catalog/category/921/">MING YANG</a></li>
<li>KAAST</li>
</ul>
</div>
<div class="blocks_littles">
<p>Фрезерные станки</p>
<img src="../upload/test_metall/tok_frez.jpg" alt="" width="100" height="137" />
<ul>
<li><a href="catalog/category/673/">CAMPRO</a></li>
<li>KAAST</li>
</ul>
</div>
<div class="blocks_littles">
<p>Сверлильные и горизонтально-расточные станки</p>
<img src="../upload/test_metall/_IMAC.jpg" alt="" width="100" height="137" />
<ul>
<li><a href="catalog/category/915/">IMAC</a></li>
<li>KAAST</li>
<li>HELTOS</li>
</ul>
</div>
<div class="blocks_littles">
<p>Ленточнопильные и дисковые станки</p>
<img src="../upload/test_metall/lentochn_piln.jpg" alt="" width="100" height="137" />
<ul>
<li><a href="catalog/category/lentochnopilnye_stanki_bekamak/">BEKAMAK</a></li>
<li><a href="catalog/category/lentopilnye_stanki_klaeger/">KLAEGER</a></li>
<li><a href="catalog/category/897/">SCOTCHMAN</a></li>
</ul>
</div>
<div class="blocks_littles">
<p>Шлифовальное оборудование</p>
<img src="../upload/test_metall/obor_shlif.jpg" alt="" width="100" height="137" />
<ul>
<li><a href="catalog/category/624/">GECAM</a></li>
<li><a href="catalog/category/629/">JACOB LOEWER</a></li>
<li><a href="catalog/category/639/">VIBROCHIMICA</a></li>
</ul>
</div>
<div class="blocks_littles">
<p>Резьбонарезные станки</p>
<img src="../upload/test_metall/rezbonar_cbc.jpg" alt="" width="100" height="137" />
<ul>
<li><a href="catalog/category/631/">CBC</a></li>
</ul>
</div>
</div>
<h3 class="head">Оборудование для резки и раскроя листа и трубы</h3>
<div class="big_blocks">
<div class="blocks_littles">
<p>Гильотинные ножницы</p>
<img src="../upload/test_metall/shearmaster-610.jpg" alt="" width="100" height="137" />
<ul>
<li><a href="catalog/category/jordi/">DENER MAKINA</a></li>
<li><a href="catalog/category/listogiby_ruchnye/">AYSANMAK</a></li>
<li><a href="catalog/category/scotchman/">SCOTCHMAN</a></li>
<li>AMADA</li>
</ul>
</div>
<div class="blocks_littles">
<p>Портальные машины плазменной резки</p>
<img src="../upload/test_metall/plaz_rezka1.jpg" alt="" width="100" height="137" />
<ul>
<li><a href="catalog/category/916/">DENER MAKINA</a></li>
<li><a href="catalog/category/service-soitaab/">SOITAAB</a></li>
<li><a href="catalog/category/918/">HACO</a></li>
<li>AMADA</li>
</ul>
</div>
<div class="blocks_littles">
<p>Портальные машины лазерной резки</p>
<img src="../upload/test_metall/laz_rezk.jpg" alt="" width="100" height="137" />
<ul>
<li>AMADA</li>
</ul>
</div>
<div class="blocks_littles">
<p>Пресс-ножницы</p>
<img src="../upload/test_metall/01met.jpg" alt="" width="100" height="137" />
<ul>
<li><a href="catalog/category/scotchman/">SCOTCHMAN</a></li>
</ul>
</div>
<div class="blocks_littles">
<p>Координатно-пробивочные прессы</p>
<img src="../upload/test_metall/koord_prib_presu.jpg" alt="" width="100" height="137" />
<ul>
<li><a href="catalog/category/635/">TAILIFT</a></li>
<li>AMADA</li>
</ul>
</div>
<div class="blocks_littles">
<p>Угловысечные прессы</p>
<img src="../upload/test_metall/ygl_vus_st.jpg" alt="" width="100" height="137" />
<ul>
<li><a href="catalog/category/648/">GECAM</a></li>
<li><a href="catalog/category/jordi/">DENER MAKINA</a></li>
</ul>
</div>
</div>

<h3 class="head">Оборудование для гибки труб и профилей</h3>
<div class="big_blocks">
<div class="blocks_littles">
<p>Профилегибы</p>
<img src="../upload/test_metall/profel.jpg" alt="" width="100" height="137" />
<ul>
<li><a href="catalog/category/profilegiby-comac/">СOMAC</a></li>
<li><a href="catalog/category/bendmak/">BENDMAK</a></li>
<li><a href="catalog/category/651/">THOMAN</a></li>
</ul>
</div>
<div class="blocks_littles">
<p>Трубогибы</p>
<img src="../upload/test_metall/trubogibu.jpg" alt="" width="100" height="137" />
<ul>
<li><a href="catalog/category/630/">CBC</a></li>
<li><a href="catalog/category/651/">THOMAN</a></li>
</ul>
</div>
</div>

<h3 class="head">Сварочное оборудование</h3>
<div class="big_blocks">
<div class="blocks_littles">
<p>Дуговая сварка</p>
<img src="../upload/test_metall/dyg.jpg" alt="" width="100" height="137" />
<ul>
<span><a href="catalog/category/dugovaya-svarka/">Migatronic</a>:</span><br />
<li><a href="catalog/category/ruchnaya-dugovaya-svarka/">Ручная</a></li>
<li><a href="catalog/category/poluavtomaticheskaya-svarka/">Полуавтомат</a></li>
<li><a href="catalog/category/argonodugovaya-svarka/">Аргон</a></li>
<li><a href="catalog/category/plazmennaya-svarka/">Плазма</a></li>
</ul>
</div>
<div class="blocks_littles">
<p>Контактная сварка</p>
<img src="../upload/test_metall/contact_svar.jpg" alt="" width="100" height="137" />
<ul>
<li><a href="category/kontaktnaya-svarka/">DALEX</a></li>
</ul>
</div>
<div class="blocks_littles">
<p>Плазменная резка</p>
<img src="../upload/test_metall/plaz_rezka.jpg" alt="" width="100" height="137" />
<ul>
<li><a href="catalog/category/plazmennaya-rezka/">MIGATRONIC</a></li>
</ul>
</div>
</div>
</div>

<br />
</div>
</body>
</html>