How to hide or show the desired block when clicking on an element? - SEO

Outif
July 9, 2021
96 views
0 votes
2 Answers

I have a list-menu .sidebar-menu and each li of this list has its own id. There is also a .services-info block, where blocks are located, one of which should appear when you click on one of the items in the .sidebar-menu that corresponds to this block. On the blocks in .services-info, I hung the .invisible class, which hides them and there is a .visible class with the display: block property.
Question: How to make it so that when you click on one of the .sidebar-menu items, the corresponding block appears and the unnecessary one disappears? For example, I clicked on the "Business card site" item and in .services-info (circled in red in the picture) the corresponding block appears (with the .business-card class) and the previous block disappears, or I clicked on the "Online store" item and it appears also the corresponding block (with class .market). and unnecessary disappears.

Site ct03638.tmweb.ru

Code jsfiddle.net/qhfs7jmb/

.invisible{
    display:  none;
}


.visible {
    display: block;
}

<section class="services" id="services">
            <div class="services-info-bg"></div>
            <div class="wrapper">
                <div class="content">
                    <div class="sidebar">
                        <h3>Наши услуги</h3>
                        <ul class="sidebar-menu">
                            <li id="business-card"><a href="#">Сайт-визитка</a></li>
                            <li id="landing"><a href="#">Landing page</a></li>
                            <li id="market"><a href="#">Интернет-магазин</a></li>
                            <li id="corp"><a href="#">Корпоративный сайт</a></li>
                            <li id="bitrix"><a href="#">1C Битрикс</a></li>
                            <li id="advertising"><a href="#">Контекстная реклама</a></li>
                            <li id="seo"><a href="#">SEO оптимизация</a></li>
                            <li id="promotion"><a href="#">Продвижение в соц. сетях</a></li>
                            <li id="marketing"><a href="#">Контент-маркетинг</a></li>
                        </ul>
                        <ul class="sidebar-nav">
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
                    <div class="services-info">
                        <div class="content">
                            <div class="business-card invisible">Сайт-визитка</div>
                            <div class="landin invisible">Landing page</div>
                            <div class="market">
                                <div class="services-info-title">
                                    Созданные экспертами «Inter-web» сайты интернет-магазинов имеют функциональность, необходимую для успешной онлайн-торговли.
                                </div>
                                <p>Что входит в нашу работу:</p>
                                <div class="services-info-block">
                                    <ul>
                                        <li>+ Подготовка технического задания</li>
                                        <li>+ Разработка прототипа</li>
                                        <li>+ Верстка макета</li>
                                        <li>+ Интеграция дизайна</li>
                                    </ul>
                                    <ul>
                                        <li>+ Написание уникальных текстов</li>
                                        <li>+ Сбор семантики</li>
                                        <li>+ Тестирование и запуск</li>
                                        <li>+ Подключение веб-аналитики</li>
                                    </ul>
                                </div>
                                <div class="services-info-footer">
                                    <a class="order" href="#">Сделать заказ</a>
                                    <a href="#" class="details">Узнать подробнее &rarr;</a>
                                </div>
                            </div>
                           
                        </div>
                    </div>
                </div>
            </div>
        </section>

Answers

Add an event listener to the sidebar <ul> to listen for clicks on the sidebar elements.

When the user clicks on a sidebar element the event listener looks for the ID of the clicked element and uses that to construct a query selector to select the required content <div>.

Then add the invisible class and remove the ‘visible’ class on all the content <div>, and finally set the ‘visible’ class on the required content <div>

You could just search for the visible content block and change that, but past experience has taught me to hide everything I don’t want, regardless.

The code you need shoud be enclosed within <script> tags and added to the foot of your page.

    document.querySelector('ul.sidebar-menu').addEventListener('click',function(e){
        e.preventDefault();
        // The <a> element was clicked, but we need the ID from the enclosing <li> element
        let clickedId = e.target.closest('li').id;
        // Set all the content elements to invisible (saves trying to find the visible one)
        let contentDivs = document.querySelectorAll('div.services-info>div.content>div');
        contentDivs.forEach((el)=>{el.classList.remove('visible'); el.classList.add('invisible')});
        // Now, using the ID from the <li>, create a query selector to find the content <div>
        let targetSelector = 'div.services-info>div.content>div.'+clickedId;
        // Set that element visible
        document.querySelector(targetSelector).classList.add('visible');
    });

.invisible{
    display:  none;
}


.visible {
    display: block;
}

<section class="services" id="services">
            <div class="services-info-bg"></div>
            <div class="wrapper">
                <div class="content">
                    <div class="sidebar">
                        <h3>Наши услуги</h3>
                        <ul class="sidebar-menu">
                            <li id="business-card"><a href="#">Сайт-визитка</a></li>
                            <li id="landing"><a href="#">Landing page</a></li>
                            <li id="market"><a href="#">Интернет-магазин</a></li>
                            <li id="corp"><a href="#">Корпоративный сайт</a></li>
                            <li id="bitrix"><a href="#">1C Битрикс</a></li>
                            <li id="advertising"><a href="#">Контекстная реклама</a></li>
                            <li id="seo"><a href="#">SEO оптимизация</a></li>
                            <li id="promotion"><a href="#">Продвижение в соц. сетях</a></li>
                            <li id="marketing"><a href="#">Контент-маркетинг</a></li>
                        </ul>
                        <ul class="sidebar-nav">
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
                    <div class="services-info">
                        <div class="content">
                            <div class="business-card invisible">Сайт-визитка</div>
                            <div class="landing invisible">Landing page</div>
                            <div class="market">
                                <div class="services-info-title">
                                    Созданные экспертами «Inter-web» сайты интернет-магазинов имеют функциональность, необходимую для успешной онлайн-торговли.
                                </div>
                                <p>Что входит в нашу работу:</p>
                                <div class="services-info-block">
                                    <ul>
                                        <li>+ Подготовка технического задания</li>
                                        <li>+ Разработка прототипа</li>
                                        <li>+ Верстка макета</li>
                                        <li>+ Интеграция дизайна</li>
                                    </ul>
                                    <ul>
                                        <li>+ Написание уникальных текстов</li>
                                        <li>+ Сбор семантики</li>
                                        <li>+ Тестирование и запуск</li>
                                        <li>+ Подключение веб-аналитики</li>
                                    </ul>
                                </div>
                                <div class="services-info-footer">
                                    <a class="order" href="#">Сделать заказ</a>
                                    <a href="#" class="details">Узнать подробнее &rarr;</a>
                                </div>
                            </div>
                           
                        </div>
                    </div>
                </div>
            </div>
        </section>

One method is to set an attribute with selected menu item id on body element and in CSS show the element with the same class name.
The section that you want to show when clicked menu item must have the same class name as the id of <li> item:

const menu = document.querySelectorAll(".sidebar-menu li > a"),
      onClick = e =>
      {
        e.preventDefault();
        //get ID from <li> element and add to the body "show" attribute
        document.body.setAttribute("show", e.target.parentNode.id);
      };

for(let i = 0; i < menu.length; i++)
  menu[i].addEventListener("click", onClick);

.services-info .content > div
{
  display: none;
}

body[show="business-card"] .business-card,
body[show="landing"] .landing,
body[show="market"] .market,
body[show="corp"] .corp,
body[show="bitrix"] .bitrix,
body[show="advertising"] .advertising,
body[show="seo"] .seo,
body[show="promotion"] .promotion,
body[show="marketing"] .marketing
{
  display: block;
}

<section class="services" id="services">
            <div class="services-info-bg"></div>
            <div class="wrapper">
                <div class="content">
                    <div class="sidebar">
                        <h3>Наши услуги</h3>
                        <ul class="sidebar-menu">
                            <li id="business-card"><a href="#">Сайт-визитка</a></li>
                            <li id="landing"><a href="#">Landing page</a></li>
                            <li id="market"><a href="#">Интернет-магазин</a></li>
                            <li id="corp"><a href="#">Корпоративный сайт</a></li>
                            <li id="bitrix"><a href="#">1C Битрикс</a></li>
                            <li id="advertising"><a href="#">Контекстная реклама</a></li>
                            <li id="seo"><a href="#">SEO оптимизация</a></li>
                            <li id="promotion"><a href="#">Продвижение в соц. сетях</a></li>
                            <li id="marketing"><a href="#">Контент-маркетинг</a></li>
                        </ul>
                        <ul class="sidebar-nav">
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
                    <div class="services-info">
                        <div class="content">
                            <div class="business-card invisible">Сайт-визитка</div>
                            <div class="landing invisible">Landing page</div>
                            <div class="market">
                                <div class="services-info-title">
                                    Созданные экспертами «Inter-web» сайты интернет-магазинов имеют функциональность, необходимую для успешной онлайн-торговли.
                                </div>
                                <p>Что входит в нашу работу:</p>
                                <div class="services-info-block">
                                    <ul>
                                        <li>+ Подготовка технического задания</li>
                                        <li>+ Разработка прототипа</li>
                                        <li>+ Верстка макета</li>
                                        <li>+ Интеграция дизайна</li>
                                    </ul>
                                    <ul>
                                        <li>+ Написание уникальных текстов</li>
                                        <li>+ Сбор семантики</li>
                                        <li>+ Тестирование и запуск</li>
                                        <li>+ Подключение веб-аналитики</li>
                                    </ul>
                                </div>
                                <div class="services-info-footer">
                                    <a class="order" href="#">Сделать заказ</a>
                                    <a href="#" class="details">Узнать подробнее &rarr;</a>
                                </div>
                            </div>
                           
                        </div>
                    </div>
                </div>
            </div>
        </section>

Please signup or login to give your own answer.

Click here to cancel reply.

How to hide or show the desired block when clicking on an element? – SEO

Answers