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

Здравствуйте уважаемые, в 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,
форум поиск открывашка

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

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();
            }

      });
})
});