Frustrieren Abstand zwischen Verbergen/Zeigen-Taste und Toggle

Wie kann ich meine Toggle, um von der gleichen Position, die die Schaltfläche ausblenden/anzeigen ist in wechseln, anstatt eine Lücke zwischen dem Ausblenden/Zeigen-Taste und der Toggle.Frustrieren Abstand zwischen Verbergen/Zeigen-Taste und Toggle

Ich habe alles versucht, ich denken kann:

Festlegung der Marge/padding oben;

setzen Sie den Knopf innerhalb der div.

Aber ich kann nicht erreichen, was ich zu erreichen hoffte.

Dies ist, wie ich es aussehen würde:

Vor klicken

Nach Klick

Irgendwelche Vorschläge?

function toggle_visibility(id) { 
 
     
 
       var e = document.getElementById(id); 
 
       if (e.style.display == 'block' || e.style.display == '') 
 
        e.style.display = 'none'; 
 
       else 
 
        e.style.display = 'block'; 
 
      }

div#first_product{ 
 
    width: 50%; 
 
    margin-left: 301px; 
 
} 
 

 
div#red_head{ 
 
    background-color: #ed1c24; 
 
    height: 40px; 
 
    color: #fff; 
 
    padding-left: 15px; 
 
    line-height: 35px; 
 
} 
 

 
div#first_product{ 
 
    padding:0; 
 
    background-color: #f1f1f2; 
 
    /*Dynamic height*/ 
 
    height:auto; 
 
    min-height:250px; 
 
    height:auto !important;  /* IE does not support min-height */ 
 
    height:250px; 
 
    display: none; /*HIDE TOOGLE ON PAGE LOAD*/ 
 

 
} 
 

 
#products_tog_but{ 
 
    background-color: #f8f9f9; 
 
    border: 1.5px dashed #999999; 
 
    width: 100%; 
 
    height: 40px; 
 
    border-radius: 5px; 
 
    margin-bottom: 20px; 
 
} 
 

 

 
div#hide_btn{ 
 
    width:50%; 
 
    margin-left: 301px; 
 
}

 <!--HIDE TOGGLE BTN --> 
 
     <div id="hide_btn"> 
 
      <button id="products_tog_but" onclick="toggle_visibility('first_product')">Hello!</button> 
 
     </div> 
 

 
     <!-- TOGGLE BTN SECTION--> 
 
     <div id="first_product"> 
 
      <div id="red_head"> 
 
       <p id="menu_title" class ="hidden" onclick="hideText('text1')" > Add your first menu item</p> 
 
      </div> 
 
      <h3 id="menu">Menu Section</h3> 
 

 
      <form name="first_prod" id="first_prod" enctype="multipart/form-data" action="testing.php" method="post" accept-charset="utf-8" >    
 

 
       <label id="cat_label" name="cat_label" class="lab">Name</label> 
 
       <input type="text" id="cat_name" name="cat_name" value=""> 
 
       <br> 
 
       <label id="desc_label" name="desc_label" class="lab">Description</label> 
 
       <input type="text" id="cat_desc" name="cat_desc" value=""> 
 

 
       <input type="Submit" id="save_first_prod" name="save_first_prod" onclick="toggle_visibility('first_product')" value=" + ADD"> 
 

 
      </form> 
 
     </div>

Quelle

2016-04-10 Monroe

Könnten Sie versuchen Sie, margin: 0; zu deinem first_product und hide_btn – Erick

Entfernen Sie die margin-bottom Ihres button und margin-top:0; auf dem ersten p Element hinzufügen

p#menu_title{ 
    margin-top:0; 
} 

#products_tog_but{ 
    background-color: #f8f9f9; 
    border: 1.5px dashed #999999; 
    width: 100%; 
    height: 40px; 
    border-radius: 5px; 
}

See it here

Quelle

2016-04-10 17:23:37

hi das funktioniert. Aber gibt es eine Möglichkeit, den Knopf mit dem div mit ihm abzudecken schaltet – Monroe

Ich sehe nicht genau, wie es aussehen wird, können Sie es bitte erklären? –

Sorry, mein Englisch ist schlecht. Ich habe die Frage aktualisiert, hoffentlich kann dies besser erklären, was ich zu erklären versuchte – Monroe

entfernen margin-bottom von #products_tog_but und fügen margin-top: -12px; in #first_product

div#first_product{ 
    width: 50%; 
    margin-left: 301px; 
    margin-top: -12px; 
} 

#products_tog_but{ 
    background-color: #f8f9f9; 
    border: 1.5px dashed #999999; 
    width: 100%; 
    height: 40px; 
    border-radius: 5px; 
}

Siehe this jsfiddle für Demo läuft.

Ein anderer Weg, dies zu tun, anstatt margin-top als negativ zu verwenden ist:

p#menu_title { 
    margin-top: 2px; 
}

DEMO

Quelle

2016-04-10 17:44:59

Frustrieren Abstand zwischen Verbergen/Zeigen-Taste und Toggle

Antwort

Verwandte Themen