Если попытаться нажать на кнопку под текстом, то теряется фокус с элемента и она просто пропадает.
Как можно подправить? Очень уж не охота переписывать всю секцию.
#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>