Открыть/Закрыть блок при клике на нее, на другой блок и на любое свободное место?

Question

[Nur Askandirov]

Здравствуйте!

Хочу на сайте uCoz реализовать следующее: есть несколько блоков, которые содержат скрытую информацию (каждая). При клике на блок (назовем условно "Блок А"), он сворачивается и открывается скрытая информация. Теперь, мне удалось сделать так, чтобы при клике на другой блок (назовем условно "Блок Б"), автоматически сворачивается открытый "Блок А" и так далее, при клике на закрытый блок, закрывается открытый блок.

Вот собственно код (на примере двух блоков):

<!---- JB Block A ---->
 <div class="job_page_block">
 <a href="javascript://" onclick="$('.jb_intextblock').hide('slow'); $('#jblock-6').slideToggle('slow');" title="Click to open more information"><div class="jobpage_block">
 <div class="jobpage_ico"><img src="/img/agent.png" class="jb_ico"></div>
 <div class="jobpage_block_descr">
 <p class="jb_toptext">Visible title</p>
 <p class="jb_subtext">Visible description!</p>
 </div>
 <div class="clr"></div>
 </div></a>
 <div class="jb_intextblock" id="jblock-6" style="display:none;">Invisible information</div>
 </div>
 <!---- JB Block A END ---->
 <!---- JB Block B ---->
 <div class="job_page_block">
 <a href="javascript://" onclick="$('.jb_intextblock').hide('slow'); $('#jblock-7').slideToggle('slow');" title="Click to open more information"><div class="jobpage_block">
 <div class="jobpage_ico"><img src="/img/agent.png" class="jb_ico"></div>
 <div class="jobpage_block_descr">
 <p class="jb_toptext">Visible title</p>
 <p class="jb_subtext">Visible description!</p>
 </div>
 <div class="clr"></div>
 </div></a>
 <div class="jb_intextblock" id="jblock-7" style="display:none;">Invisible information</div>
 </div>
 <!---- JB Block B END ---->

Теперь, мне нужна ваша помощь в модификации JS так, чтобы открытый блок закрывался не только, когда идет клик на любой закрытый блок, а также при клике на нее саму и при клике на любое свободное место.

Если есть знающие, подскажите пожалуйста.

Answer 1

[Nur Askandirov]

Решил таким образом:

HTML:

<!---- JB Block ---->
 <div class="job_page_block">
 <a href="#" class="open_jb_intextblock" title="Click to open more information"><div class="jobpage_block">
 <div class="jobpage_ico"><img src="/img/volunteer.png" class="jb_ico"></div>
 <div class="jobpage_block_descr">
 <div class="jobpage_block_descr">
 <p class="jb_toptext">Visible Block Title</p>
 <p class="jb_subtext">Visible Block Information</p>
 </div>
 <div class="clr"></div>
 </div></a>
 <div class="jb_intextblock" style="display:none;">Invisible information</div>
 </div>
<!---- JB Block ---->

<!---- JB Block ---->
 <div class="job_page_block">
 <a href="#" class="open_jb_intextblock" title="Click to open more information"><div class="jobpage_block">
 <div class="jobpage_ico"><img src="/img/volunteer.png" class="jb_ico"></div>
 <div class="jobpage_block_descr">
 <p class="jb_toptext">Visible Block Title</p>
 <p class="jb_subtext">Visible Block Information</p>
 </div>
 <div class="clr"></div>
 </div></a>
 <div class="jb_intextblock" style="display:none;">Invisible information</div>
 </div>
<!---- JB Block ---->

<!---- JB Block ---->
 <div class="job_page_block">
 <a href="#" class="open_jb_intextblock" title="Click to open more information"><div class="jobpage_block">
 <div class="jobpage_ico"><img src="/img/volunteer.png" class="jb_ico"></div>
 <div class="jobpage_block_descr">
 <p class="jb_toptext">Visible Block Title</p>
 <p class="jb_subtext">Visible Block Information</p>
 </div>
 <div class="clr"></div>
 </div></a>
 <div class="jb_intextblock" style="display:none;">Invisible information</div>
 </div>
 <!---- JB Block END ---->

JS

<script>
$(function() {
    $('.open_jb_intextblock').on('click', function(e) {
        $('.jb_intextblock').slideUp('slow');
        if ( $(this).parent().find('.jb_intextblock').is(':visible') )
            $(this).parent().find('.jb_intextblock').slideUp('slow');
        else
            $(this).parent().find('.jb_intextblock').slideToggle('slow');
        e.preventDefault();
        e.stopPropagation();
    });
    $(document).on('click', function(){
        $('.jb_intextblock').slideUp('slow');
    });
});
</script>

Comments

[Максим]

вам же дали пример - он верный 100% но для того что бы закрывать его вне поля то создаётся пустой div фиксированный и с размером 100% 100% и со стилем display:none; z-index :чуть ниже чем само меню;а на jquery при клике этот блок открывается но его не видно - реализуется по типу любого модального окна

[Максим]

вот пример -- https://jsfiddle.net/uxsL613u/