pseudo-classes in CSS

Question

pseudo-classes in CSS

Navigation

#1 by (3 votes)

1

I'm creating a module that will display information. this information should be displayed as expandable divs, which I created using only CSS as it is here :

.news .itens {
    overflow: auto;
    margin-right: -20px;
    height: 292px;
    float: left;
    width: 290px;
    font-size: 65%;
}

.news .itens a {
    float: left;
    width: 258px;
    padding: 0px 5px;
    text-align: right;
    height: auto;
    background:rgba(168, 202, 106,0.3);
    line-height: 25px;
    border-right: 2px solid rgb(168, 202, 106);
    margin-bottom: 2px;
    font-size: 120%;
}

.news .itens p {
    display:none;
    float: left;
    line-height: 20px;
    padding: 0px 5px;
    width: 248px;
    border-left: 2px solid rgb(255,255,255);
    background: rgb(255,255,255);
    margin-bottom: 0px;
    text-align: justify;
    overflow:hidden;
}

.news .itens a:focus p{
    display:block;
}

.news .itens a:first-child p{
    display:block;
}

.news .itens a:first-child + .news .itens a:focus p{
    display:none;
}

My problem is that I need to make the first element in the a:first-child % divx close as soon as it is clicked on another existing element, and that when no element is focus , it stays open as it is in CSS.

How could this be done?

html css

asked by anonymous 02.12.2014 / 14:29

1 answer

ScrollTop after the page has already been loaded Error: Expected a conditional expression and instead saw an assignment

score 3 · Accepted Answer

See this example:

1st HTML ->

<div id="acordeon">
   <a href="#primeira">Primeira</a>        
   <div id="primeira">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
   </div>
   <a href="#segunda">Segunda</a>        
   <div id="segunda">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
   </div>
   <a href="#terceira">terceira</a>        
   <div id="terceira">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
   </div>

2nd CSS ->

#acordeon div {
    height: 0;
    overflow: hidden;
    transition: height 600ms;
    background: #999;
}
 #acordeon div: target {
    height: 110px;
}