The problem with focus. Hidden items

#title #tech:focus ~ #techText, #title #diagramm:focus ~ #diagrammText, #title #circle:focus ~ #circleText, #title #loope:focus ~ #loopeText{ display: block !important; } .serviceContent{ width: 60%; height: 50%; display: none; float: right; position: absolute; bottom: 0; left: 30%; right: 20px; top: 0; } 

 <div id="title"> <div class="miniMenu"> <div tabindex="0" class="icons" id="diagramm"> <img src="img\service\diagramm.png" alt="diagramm"> </div> <div tabindex="0" class="icons" id="tech"> <img src="img\service\tech.png" alt="tech"> </div> <div tabindex="0" class="icons" id="loope"> <img src="img\service\loope.png" alt="loope"> </div> <div tabindex="0" class="icons" id="circle"> <img src="img\service\diagramm.png" alt="circle"> </div> <div class="serviceContent" id="diagrammText"> <p class="text" id="head">1Modern App Design</p> <img id="orangeUndrLine" src="img\service\line.png" alt="orange_undr_line"> <p class="text" id="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas accusamus odio nulla ut iure quos beatae earum molestiae, aperiam nihil ex reprehenderit mollitia rem voluptatem, in odit nostrum atque, distinctio.</p> <div id="win" style="display:none;"> <div class="overlay"></div> <div class="visible"> <h2>Заголовок окна</h2> <div class="content"> <p>Содержание</p> <p>Модальное окно фиксированной ширины</p> </div> <button type="button" onClick="getElementById('win').style.display='none';">закрыть</button> </div> </div> <button id="knowMoreBtn" type="button" onClick="getElementById('win').removeAttribute('style');">Know more</button> </div> <div class="serviceContent" id="techText"> <p class="text" id="head">2Modern App Design</p> <img id="orangeUndrLine" src="img\service\line.png" alt="orange_undr_line"> <p class="text" id="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas accusamus odio nulla ut iure quos beatae earum molestiae, aperiam nihil ex reprehenderit mollitia rem voluptatem, in odit nostrum atque, distinctio.</p> <button id="knowMoreBtn">Know more</button> </div> <div class="serviceContent" id="loopeText"> <p class="text" id="head">3Modern App Design</p> <img id="orangeUndrLine" src="img\service\line.png" alt="orange_undr_line"> <p class="text" id="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas accusamus odio nulla ut iure quos beatae earum molestiae, aperiam nihil ex reprehenderit mollitia rem voluptatem, in odit nostrum atque, distinctio.</p> <button id="knowMoreBtn">Know more</button> </div> <div class="serviceContent" id="circleText"> <p class="text" id="head">4Modern App Design</p> <img id="orangeUndrLine" src="img\service\line.png" alt="orange_undr_line"> <p class="text" id="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas accusamus odio nulla ut iure quos beatae earum molestiae, aperiam nihil ex reprehenderit mollitia rem voluptatem, in odit nostrum atque, distinctio.</p> <button id="knowMoreBtn">Know more</button> </div> </div> <div class="serviceImage"> <img src="img\apple-watch-mockup.png" alt=""> </div> </div>