Jump to content
  • 0

Вставить картинку в поле вкладки


kristinad
 Share

Question

Здравствуйте. Есть блок с вкладками, а именно - раскрывающиеся вкладки типа Аккордеон. Необходимо вставить картинку в названии каждой вкладки перед текстом. Как это сделать при помощи кода html?

Безымянный1.png

Безымянный2.png

Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 0
23 часа назад, npofopr сказал:

Взять тег <img> и вставить в нужное место. 

Тогда вкладка не раскрывается. Можете, пожалуйста, написать поточнее? Мой код ниже:

 

<div class="mbr-overlay" mbr-if="overlay&&bg.type!== 'color'" mbr-style="{'opacity': overlayOpacity, 'background-color': overlayColor}">
    </div>
        <div class="container">
            <div class="media-container-row">
                <div class="col-12 col-md-12">
                    <div class="section-head text-center space30">
                       <h2 class="mbr-section-title pb-3 mbr-fonts-style" mbr-theme-style="display-2" mbr-if="showTitle">
                            Accordions
                        </h2>
                    </div>
                    <div class="clearfix"></div>
                    <div id="bootstrap-toggle" class="toggle-panel accordionStyles tab-content">
                        <div class="card">
                            <div class="card-header" role="tab" id="headingOne">
                                <a role="button" class="collapsed panel-title" data-toggle="collapse" data-core href="#collapse1" aria-expanded="false" aria-controls="collapse1">
                                    <h4 class="mbr-fonts-style" mbr-theme-style="display-4">Fashion Trends</h4>
                                </a>
                            </div>
                            <div id="collapse1" class="panel-collapse noScroll collapse" role="tabpanel" aria-labelledby="headingOne">
                                <div class="panel-body">
                                    <p class="mbr-fonts-style mbr-text panel-text" mbr-theme-style="display-4" data-app-selector=".panel-text">
                                       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et elit vitae lectus convallis scelerisque. Cras vestibulum blandit lorem, at fringilla nisl sollicitudin ac. Nunc venenatis nec neque sed semper. Mauris viverra, sapien sed fringilla egestas, sem felis condimentum augue, vitae sodales sem metus in ex. Aenean massa velit, sollicitudin quis elementum sit amet, vehicula sed nunc.</p>
                                </div>
                            </div>
                        </div>
                        <div class="card" mbr-if="bootstrapAccordion > 1">
                            <div class="card-header" role="tab" id="headingTwo">
                                <a role="button" class="collapsed panel-title" data-toggle="collapse" data-core href="#collapse2" aria-expanded="false" aria-controls="collapse2">
                                    <h4 class="mbr-fonts-style" mbr-theme-style="display-4">Casual Style</h4>
                                </a>
 
                            </div>
                            <div id="collapse2" class="panel-collapse noScroll collapse" role="tabpanel" aria-labelledby="headingTwo">
                                <div class="panel-body">
                                    <p class="mbr-fonts-style mbr-text panel-text" mbr-theme-style="display-4" data-app-selector=".panel-text">
                                       Donec facilisis felis arcu, vitae vestibulum massa lobortis eget. Ut pellentesque purus feugiat, tristique magna ac, luctus est. Vivamus sit amet magna venenatis, bibendum erat eu, tincidunt justo. Aenean viverra sollicitudin neque, sed bibendum nulla mollis id. Proin sit amet aliquet dui.&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et elit vitae lectus convallis scelerisque.</p>
                                </div>
                            </div>
                        </div>
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy