Показать сообщение отдельно
  #1 (permalink)  
Старый 07.07.2017, 01:37
Аспирант
Отправить личное сообщение для Chmil Посмотреть профиль Найти все сообщения от Chmil
 
Регистрация: 07.07.2017
Сообщений: 41

Хочу немного переделать скрипт
Здравствуйте уважаемые, в 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>


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