How to show the div when you click on the checkbox and hide the div when unchecking the checkbox? And so that when you hide the diva, the text under it would be pulled up to the checkbox.

    1 answer 1

    function toggle() { var div = document.getElementById('pnlTest'); if(this.checked) div.style.display = 'block'; else div.style.display = 'none' } document.getElementById('chkTest').onchange = toggle; 
     div { background: red; height: 100px; display: none } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" id="chkTest" /> <label for="chkTest">test</label> <div id="pnlTest"></div> <p> Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. </p>

    • 2
      You can shorten it a little: function toggle () {document.getElementById ('pnlTest'). style.display = this.checked? 'block': 'none'} - Vitaly Pozdnyakov
    • And how can you make the div was first shown (on the checkbox, the default check mark is checked = checked), and when you uncheck a check mark, did div disappear? - Frontender
    • You can do it through css. - zb '
    • one
      @ Viktor Pavlov: Remove display: none from the styles, and the div will be displayed by default. - Pavel Azanov
    • one
      @eicto: It’s possible , but for IE <9 you’ll have to do a fallback anyway. - Pavel Azanov