There is such a code

jQuery(function($) { $('.expand').click(function() { $('.info', this).toggle(); }); }); 
 .expand { cursor: pointer; } .expand:before { content: '+'; margin-right: 1ex; } .info { display: none; margin-left: 2ex; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="expand">Expand <div class="info">Info</div> </div>

Question: how would minimal effort in opening the node to change the initial + to - ?

3 answers 3

 jQuery(function($) { $('.expand').click(function() { $(this).toggleClass('opened'); }); }); 
 .expand { cursor: pointer; } .expand:before { content: '+'; margin-right: 1ex; } .expand.opened:before { content: '-'; margin-right: 1.5ex; } .info { display: none; margin-left: 2ex; } .opened .info { display: block; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="expand">Expand <div class="info">Info</div> </div>

  • one
    Thank. Yesterday I went to bed and came to the same code before going to bed. The only remark is that if instead of the class opened used closed , then the css is a bit more compact - Anton Shchyrov
  • Yes, classes can be called whatever you like - Pavel
  • It's not about the title. The closed logic will be inverse - Anton Shchyrov

Critical version on HTML + CSS :

 * { margin: 0; padding: 0; } body { font-family: Arial; } a { color: black; text-decoration: none; } /*BEGIN | MAIN*/ .list { position: relative; list-style-type: none; display: none; margin-left: 0.4rem; } .collapse { margin: 0.5rem 1.2rem; position: relative; } label { cursor: pointer; user-select: none; font-size: 1.5em; } label::before { content: "+"; color: gray; position: absolute; top: 0; left: -1rem; } #toggle { display: none; } #toggle:checked~.list { display: block; } #toggle:checked~label::before { content: "-"; } /*END | MAIN*/ 
 <div class="collapse"> <input type="checkbox" id="toggle"> <label for="toggle">Expand</label> <ul class="list"> <li><a href="#">first</a></li> <li><a href="#">second</a></li> <li><a href="#">third</a></li> </ul> </div>

  • Of course it is difficult to call a solution, but at least without JS : D - Arthur
  • 2
    A normal decision, given its fundamentally different from the previous ones - slowBro
  • one
    It does not come in handy for me, but the idea is beautiful - Anton Shchyrov

 jQuery(function($) { $('.expand').click(function() { $(this).toggleClass('closed'); }); }); 
 .expand { cursor: pointer; } .expand:before { content: '\2013'; margin-right: 1ex; } .closed.expand:before { content: '+'; } .info { margin-left: 2ex; } .closed .info { display: none; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="expand closed">Expand <div class="info">Info</div> </div>