Как переключить div и стрелки вверх-вниз, используя только css

Question

Я бы хотел переключить div и вверх-вниз стрелки, используя только css. Я хотел бы также ссылку в нижней части DIV закрыть DIV (меньше)

Это некоторые проблемы, с которыми я столкнулся -

1. Чем меньше ссылку, чтобы закрыть DIV в нижней части делает не работает в Firefox и исследователь интернета

2. стрелки, кроме тумблера не отображается, кроме заголовка, но под заголовком, и они не показывают вообще в FireFox и исследователь интернета

3. слабый своеобразный выход линия приходит на вверх-вниз Arrowhead элементы

4. Edit - тумблер почтовый ящик также не скрывает в Firefox и Internet Explorer

Как было предложено Jibbow, я заменил «а» метки с "диапазон" тег для меньше ссылки и она теперь работает

Вот мой код -

Html -

<label class="label" for="_1">Stack OverFlow - Aim of Website - To discuss 
good questions about good code and code development</label> 

<input class="toggle-inbox" id="_1" type="checkbox" > 

<div id="text-contents-details1">Lorem ipsum dolor sit amet, consectetuer 
adipiscing. &nbsp;&nbsp; 

<label href="#clear" class="less" for="_1"><span id="less" style="color:darkorange;" class="arrow- 
less">Less</span></label> 
</div> 

Css -

.label { 
float:left; 
font-size: 29px; 
} 

.toggle-inbox { 
display: none; 
visibility: 0; 
float: left; 
} 

label +.toggle-inbox { 
cursor: pointer; 
display: block; 
font-weight: bold; 
line-height: 21px; 
margin-bottom: 20px; 
float:left; 
} 

label + .toggle-inbox + div#text-contents-details1 { 
display: none; 
margin-bottom: 10px; 
clear :both; 
} 

label + .toggle-inbox:checked + div#text-contents-details1 { 
display: block; 

} 

label +.toggle-inbox:after { 

background-color:white ; 
border-right: 3px solid black; 
border-bottom: 3px solid black; 
width: 10px; 
height: 10px; 
transform: rotate(45deg); 
-webkit-transform: scale(1) rotate(45deg) translate(0px, 0px); 
-moz-transform: rotate(45deg) scale(1.0); 
-o-transform: rotate(45deg) scale(1.0); 
margin-top: 0px; 
float: left; 
content: ""; 
margin-right:5px; 
} 

label + .toggle-inbox:checked:after { 
border-right: 3px solid black; 
border-bottom: 3px solid black; 
width: 10px; 
height: 10px; 
transform: rotate(-135deg); 
-webkit-transform: scale(1) rotate(-135deg) translate(0px, 0px); 
-moz-transform: rotate(-135deg) scale(1.0); 
-o-transform: rotate(-135deg) scale(1.0); 
margin-top: 0px; 
float: left; 
margin-right: 0px; 
margin-top:0px; 
content: ""; 
} 
.toggle-inbox + div#text-content-details1 + .less { 
visibility : 0px ; 

} 

http://codepen.io/anon/pen/bVNZJL

Пожалуйста, предложите

Answer 1

• Для того, чтобы сделать меньше ссылок работы, вы можете заменить его a тег с span. Чтобы получить полную функциональность, вы можете добавить cursor: pointer; в span.

• Этот флажок показан, потому что вы установили display: none;, но в другом месте также display: block;. Второй - переопределяет первый. Правильный код:

  .toggle-inbox { 
      display: none; 
      visibility: 0; 
      float: left; 
      } 
  
  label +.toggle-inbox { /*you could also remove 'label' here*/ 
      cursor: pointer; 
      /*removed display: block;*/ 
      font-weight: bold; 
      line-height: 21px; 
      margin-bottom: 20px; 
      float:left; 
      } 
  

• Подумав о своих «стрел», я пришел к выводу, что вы хотите, чтобы стиль флажок, чтобы выглядеть, как стрела, не так ли?
  Это невозможно сделать легко. Вы обычно скрываете свой флажок и добавляете к нему еще одну метку. Попытка установить флажок, вероятно, вызывает третью проблему.
  Прежде, чем я пойду здесь конечной точки и нажмите несколько думаю, что вы должны изменить:

  • Вы должны всегда ставить input поверх всех labels. Это связано с тем, что в CSS вы можете выбрать только следующие элементы.
  • Вы должны изменить большую часть вашего + на ~. Это связано с тем, что + выбирает только следующий элемент. ~ намного более гибкий, поскольку он выбирает , следующие элементов.Таким образом, вы могли бы сократить .toggle-inbox + div#text-content-details1 + .less к .toggle-inbox ~ .less
  • Вы можете укоротить CSS: label +.toggle-inbox (почти) равна .toggle-inbox (разница: первый один выбирает все .toggle-inbox непосредственно после любого label, второй один выбирает все .toggle-inbox)

Таким образом, весь код (очищен и, надеюсь правильно):

HTML:

<div> 
    <input class="toggle-inbox" id="_1" type="checkbox"> 

    <label class="label" for="_1">Stack OverFlow - Aim of Website - To discuss good questions about good code and code development</label> 

    <div id="text-contents-details1">Lorem ipsum dolor sit amet, consectetuer adipiscing. &nbsp;&nbsp; 
     <label href="#clear" class="less" for="_1"><span id="less" style="color:darkorange;" class="arrow-less">Less</span></label> 
    </div> 
</div> 

CSS:

.label { 
    font-size: 29px; 
} 

.toggle-inbox { 
    display: none; 
} 

.less { 
    cursor: pointer; 
} 

.toggle-inbox ~ div#text-contents-details1 { 
    display: none; 
    margin-bottom: 10px; 
    clear: both; 
} 

.toggle-inbox:checked ~ div#text-contents-details1 { 
    display: block; 
} 

.label::after { 
    background-color: white; 
    border-right: 3px solid black; 
    border-bottom: 3px solid black; 
    width: 10px; 
    display: inline-block; 
    height: 10px; 
    transform: rotate(45deg); 
    -webkit-transform: scale(1) rotate(45deg) translate(0px, 0px); 
    -moz-transform: rotate(45deg) scale(1.0); 
    -o-transform: rotate(45deg) scale(1.0); 
    margin-top: 10px; 
    content: ""; 
    margin-left: 5px; 
} 

.toggle-inbox:checked ~.label::after { 
    border-right: 3px solid black; 
    border-bottom: 3px solid black; 
    transform: rotate(-135deg); 
    -webkit-transform: scale(1) rotate(-135deg) translate(0px, 0px); 
    -moz-transform: rotate(-135deg) scale(1.0); 
    -o-transform: rotate(-135deg) scale(1.0); 
} 

http://codepen.io/anon/pen/QjbboK работает с определенно IE11 и Firefox 40 :)