The bottom line is this, when you click on one of the icons, the corresponding text should be deduced. Thought to implement this through display:none; on a div with lyrics, or via scale , I don’t know any other way. So it turns out that with :focus text does not appear even though the function itself works. I suspect an error in the syntax, tell me where is wrong?

HTML

 <div class="serviceIcon"> <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> <div class="serviceContent"> <div id="diagrammText"> <p class="text" id="head">1Modern App Design</p> <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> <div id="techText"> <p class="text" id="head">2Modern App Design</p> <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> <div id="loopeText"> <p class="text" id="head">3Modern App Design</p> <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> <div id="circleText"> <p class="text" id="head">4Modern App Design</p> <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> </div>

CSS

 .serviceIcon #tech:focus + #techText{ transform: scale(1); } .serviceContent #techText{ transform: scale(0); }
  • With such an arrangement of elements - no way. I can show through juqery or change the location that would work - Yuri
  • Yes, you can change how it would be better? - adckiykpolb
  • See, I added 3 options - Yuri

1 answer 1

If you want to open with focus , then you need to place the elements in one block, so that they are next:

 .serviceContent .icons:focus + div { display: block !important; } .serviceContent #diagrammText, .serviceContent #techText, .serviceContent #loopeText, .serviceContent #circleText { display: none; } 
 <div class="serviceContent"> <div tabindex="0" class="icons" id="diagramm"> <img src="img\service\diagramm.png" alt="diagramm"> </div> <div id="diagrammText"> <p class="text" id="head">1Modern App Design</p> <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> <div tabindex="0" class="icons" id="tech"> <img src="img\service\tech.png" alt="tech"> </div> <div id="techText"> <p class="text" id="head">2Modern App Design</p> <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> <div tabindex="0" class="icons" id="loope"> <img src="img\service\loope.png" alt="loope"> </div> <div id="loopeText"> <p class="text" id="head">3Modern App Design</p> <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> <div tabindex="0" class="icons" id="circle"> <img src="img\service\diagramm.png" alt="circle"> </div> <div id="circleText"> <p class="text" id="head">4Modern App Design</p> <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> </div>

If you want to use the same arrangement of elements, you will have to use a script:

 $(function() { $('.serviceIcon .icons').focus(function() { $('.serviceContent #'+$(this).attr('id')+'Text').css({'display': 'block'}); }); $('.serviceIcon .icons').blur(function() { $('.serviceContent #'+$(this).attr('id')+'Text').css({'display': 'none'}); }); }); 
 .serviceContent #diagrammText, .serviceContent #techText, .serviceContent #loopeText, .serviceContent #circleText { display: none; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="serviceIcon"> <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> <div class="serviceContent"> <div id="diagrammText"> <p class="text" id="head">1Modern App Design</p> <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> <div id="techText"> <p class="text" id="head">2Modern App Design</p> <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> <div id="loopeText"> <p class="text" id="head">3Modern App Design</p> <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> <div id="circleText"> <p class="text" id="head">4Modern App Design</p> <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> </div>

And if you want to use, what would the text appear after all the elements, but without a script, then you need to place all the icons at the beginning of the block and with the help ~ prescribe each id:

 .serviceContent .icons#diagramm:focus ~ #diagrammText { display: block !important; } .serviceContent .icons#tech:focus ~ #techText { display: block !important; } .serviceContent .icons#loope:focus ~ #loopeText { display: block !important; } .serviceContent .icons#circle:focus ~ #circleText { display: block !important; } .serviceContent #diagrammText, .serviceContent #techText, .serviceContent #loopeText, .serviceContent #circleText { display: none; } 
 <div class="serviceContent"> <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 id="diagrammText"> <p class="text" id="head">1Modern App Design</p> <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> <div id="techText"> <p class="text" id="head">2Modern App Design</p> <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> <div id="loopeText"> <p class="text" id="head">3Modern App Design</p> <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> <div id="circleText"> <p class="text" id="head">4Modern App Design</p> <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> </div>

  • I look at the script in this regard and really helps out, well, I need the type as in the 3rd version, just to the right, for me it is in the center because there will be a picture after the text :) PS JS just started learning. - adckiykpolb
  • @adckiykpolb, do not understand what it means to the right? - Yuri
  • Ie like this) text to the right of the icons < data3.floomby.com/files/share/7_1_2017/10/… > - adckiykpolb
  • @adckiykpolb, then the third and the second option suits you - Yuri