showing the div element on focus of previous div element

Question

html

<div class="channel">
   <div class="programs" id="p1"></div>
   <div class="selec_pro" id="s1" style="display:none;"></div>
   <div class="programs" id="p2"></div>
   <div class="selec_pro" id="s2" style="display:none;"></div>
   <div class="programs" id="p3"></div>
   <div class="selec_pro" id="s3" style="display:none;"></div>
   <div class="programs" id="p4"></div>
   <div class="selec_pro" id="s4" style="display:none;"></div>
</div>

The div element under class channel are created dynamically. On focus of class programs, selec_pro next to that class program div needs to be display block. After that focus off selec_pro needs to be display none.

Can anyone help ?

Answer 1

Try this in CSS:

.selec_pro {
    display: none;
}

.programs:focus + .selec_pro {
    display: block;
}

The + is the CSS adjacent sibling selector. See here: https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors