Хочу немного переделать скрипт

[Chmil]

Здравствуйте уважаемые, в javascript не силен, поэтому решил обратится к Вам. Имеется простой скрипт, который срабатывает по клике на кнопку, а именно как-бы "разворачивает" содержимое блока. Всего таких блоков 4 и нужно сделать так, что когда разворачиваешь один любой блок, то три остальных заворачиваются обратно. Тоэсть сделать так, чтобы изначально было возможно "развернуть" только один блок.

Вот код скрипта:

$(".uk-more").click(function (e) {
            e.preventDefault();
            var key = $(this).attr('data-target');
            if(key=="content"){
                key = $(this).attr('data-target-content');
                $('#text-preview-'+key).hide();
                $('#full-text-'+key).removeClass("uk-hidden-large");
                $('#full-text-'+key).removeClass("uk-visible-small");
                $('#full-text-'+key).show();
            }else{
                $('.tm-info-'+key).hide();
                $('#carousel-example-generic-'+key).removeClass("uk-hidden-large");
                $('#carousel-example-generic-'+key).removeClass("uk-visible-small");
                $('#carousel-example-generic-'+key).show();
            }
        });

Также предоставляю хтмл код одного из блоков, все 4 почти идентичны (а в части "кнопок" одинаковые):

<section class="tm-top-<?= $key ?> uk-grid" data-uk-grid-match="{target:'> div > .uk-panel'}" data-uk-grid-margin>
                                <div class="uk-width-1-1"><div class="uk-panel widget_widgetkit">
                                        <div class="tm-grid-stack-right"  data-uk-scrollspy="{target:'> div > [data-uk-scrollspy-cls]', delay:0}">
										    <div class="uk-grid uk-text-left uk-flex-middle" data-uk-grid-match data-uk-margin="{cls:'uk-margin-top'}">
                                                <!--<div class="uk-width-medium-2-5 uk-width-small-1-1 uk-text-center uk-float-right uk-flex-order-last-medium uk-invisible"  data-uk-scrollspy-cls="uk-animation-slide-left uk-invisible">-->
												<div class="uk-width-medium-2-5 uk-text-center uk-float-right uk-flex-order-last-medium">
                                                    <img item-id="<?= $item->id ?>_img" style="max-height: 220px;    margin-bottom: 35px;
                                                         margin-top: 35px;" src="<?= $item->photo ?>" class="catalog_image uk-overlay-scale" alt="">        
                                                </div>
                                                <!--<div class="uk-width-medium-3-5 uk-invisible"  data-uk-scrollspy-cls="uk-animation-slide-left uk-invisible">-->
												<div class="uk-width-medium-3-5">
                                                    <div class="uk-panel uk-width-1-1">
                                                        <h3 class="">
                                                            <a class="uk-link-reset" item-id="<?= $item->id ?>_title" href="#"><?= $item->title ?></a>
                                                        </h3>
                                                        <div class="uk-margin" item-id="<?= $item->id ?>_descr">
                                                            <p class="tm-text-medium"><?= $item->main_text ?></p>
                                                        </div>
                                                        <p>
                                                            <?php foreach ($child_pages as $child_item) { ?>
                                                                <a class="uk-button uk-button-large uk-button-secondary" item-id="<?= $child_item->id ?>" group-id="<?= $item->id ?>" href="#"><?= $child_item->name ?></a>
                                                            <?php } ?>
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </section>

Спасибо, буду благодарен за любую помощь.

[рони]

Chmil,
форум поиск открывашка

[Chmil]

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

[рони]

Chmil,
не понимаю ваш код, не могу помочь.

[Chmil]

Большое человеческое СПАСИБО пользователю рони. Предоставил мне рабочий скрипт, сам я б не справился, действительно "Профессор")).
Вот рабочий в моем случаи код, возможно кому-то пригодится, вызывать нужно после вызова jquery.js:

jQuery(function() {
jQuery(".uk-more").click(function(event) {
   event.preventDefault();
   jQuery(".uk-more").not(this).each(function(indx, element){
            var key = jQuery(this).attr('data-target');
            if(key=="content"){
                key = jQuery(this).attr('data-target-content');
                jQuery('#text-preview-'+key).show();
                jQuery('#full-text-'+key).addClass("uk-hidden-large");
                jQuery('#full-text-'+key).addClass("uk-visible-small");
                jQuery('#full-text-'+key).hide();
            }else{
                jQuery('.tm-info-'+key).show();
                jQuery('#carousel-example-generic-'+key).addClass("uk-hidden-large");
                jQuery('#carousel-example-generic-'+key).addClass("uk-visible-small");
                jQuery('#carousel-example-generic-'+key).hide();
            }

      });
})
});