ad_info_modal2.html

<section class="modal" id="ad_info_modal">
    <div class="head">
        <div class="title">Плиточник</div>

        <div class="price">по договоренности</div>

        <div class="location">Комсомольск-на-Амуре</div>

		<div class="date">Сегодня, 22:45</div>

        <div class="views">
            <svg class="icon"><use xlink:href="images/sprite.svg#ic_views"></use></svg>
            <span>345 (+11)</span>
        </div>
    </div>

    <div class="gallery">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="slide swiper-slide">
                    <a href="images/tmp/gallery_thumb5.jpg" class="thumb fancy_img" data-fancybox="gallery">
                        <img src="images/tmp/gallery_thumb5.jpg" alt="">
                    </a>
                </div>
            </div>

            <div class="swiper-button-prev">
                <svg class="icon"><use xlink:href="images/sprite.svg#ic_slider_arr"></use></svg>
            </div>

			<div class="swiper-button-next">
                <svg class="icon"><use xlink:href="images/sprite.svg#ic_slider_arr"></use></svg>
            </div>
        </div>
    </div>

    <div class="description">
        <p>Плиточник , стаж более 15 лет,. Предлагаю услуги по укладке керамической и керамогранитной плитки любой сложности.Цена договорная, после осмотра объекта.</p>
    </div>

    <div class="share">
        <span>Поделиться:</span>

        <div class="socials">
            <button class="btn blue">
                <svg class="icon icon1"><use xlink:href="images/sprite.svg#ic_share1"></use></svg>
            </button>

            <div class="dropdown">
                <a href="/">
                    <svg class="icon vkontakte"><use xlink:href="images/sprite.svg#ic_vkontakte"></use></svg>
                </a>

                <a href="/">
                    <img src="images/ic_instagram.svg" alt="">
                </a>

                <a href="/">
                    <svg class="icon facebook"><use xlink:href="images/sprite.svg#ic_facebook"></use></svg>
                </a>

                <a href="/">
                    <svg class="icon odnokl"><use xlink:href="images/sprite.svg#ic_odnokl"></use></svg>
                </a>
            </div>
        </div>

        <button class="copy_text_btn btn green" data-clipboard-text="6666666666666666666666666666">
            <svg class="icon icon2"><use xlink:href="images/sprite.svg#ic_share2"></use></svg>
        </button>
    </div>

    <div class="bottom">
        <div class="author">
            <a href="/" class="photo">
                <img src="images/tmp/author_photo.jpg" alt="">
            </a>

            <div>
                <div class="name">Василий Петрович</div>

                <div class="rating">
                    <div class="val">4.5</div>
                    <div class="stars">
                        <img src="images/ic_star_a.svg" alt="">
                        <img src="images/ic_star_a.svg" alt="">
                        <img src="images/ic_star_a.svg" alt="">
                        <img src="images/ic_star_a.svg" alt="">
                        <img src="images/ic_star.svg" alt="">
                    </div>
                </div>

                <div class="mark">
                    <img src="images/ic_mark.svg" alt="">
                    <div class="tooltip">Паспорт проверен</div>
                </div>
            </div>
        </div>

        <button class="phone_btn" data-fancybox data-type="ajax" data-src="/ad_phone_modal2.html">ПОКАЗАТЬ ТЕЛЕФОН</button>

        <a href="/" class="profile_link">
            <span>ПРОФИЛЬ</span>
        </a>
    </div>


    <script>
        $(() => {
            // Вспылвашка с информацией об обьявлении - Описание
            $('#ad_info_modal .description .spoler_btn').click(function (e) {
                e.preventDefault()

                let parent = $(this).closest('.description')

                if ($(this).hasClass('active')) {
                    $(this).removeClass('active')
                    parent.find('.hide').slideUp(200)
                } else {
                    $(this).addClass('active')
                    parent.find('.hide').slideDown(300)
                }
            })

            // Вспылвашка с информацией об обьявлении - Характеристики
            $('#ad_info_modal .features .spoler_btn').click(function (e) {
                e.preventDefault()

                let parent = $(this).closest('.features')

                if ($(this).hasClass('active')) {
                    $(this).removeClass('active')
                    parent.find('.hide').slideUp(200)
                } else {
                    $(this).addClass('active')
                    parent.find('.hide').slideDown(300)
                }
            })

            // Вспылвашка с информацией об обьявлении - Галерея
            new Swiper('#ad_info_modal .gallery .swiper-container', {
                loop: false,
                speed: 500,
                watchSlidesVisibility: true,
                slideActiveClass: 'active',
                slideVisibleClass: 'visible',
                spaceBetween: 14,
                slidesPerView: 'auto',
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev'
                }
            })

            // Копирование в буфер обмена
            new ClipboardJS('.copy_text_btn')
        })
    </script>
</section>