javascript - Show/Hide button loses styling on some browsers when clicked -
I have a show / hide button on a simple webpage, which is a However, on some browsers (most notably mobile browser), when I click to show, click on the button it loses styling properties and does not work properly. Here is the html: Script: and CSS: I am in total loss, I can not even recognize what the problem can be! Thanks in advance for any help. jQuery can be very easy and cross browser compatible. I added effect below the slide. If you do not want it, you can press . Show (); display is a script for viewing text Calls:
& lt; Div id = "description" & gt; & Lt; Div class = "showHide" & gt; & Lt; Input id = "showbox" type = "button" onclick = "show ()" value = "show app description" /> & Lt; Input id = "hidebox" type = "button" onclick = "hide ()" value = "hide description" /> & Lt; / Div & gt; & Lt; Div id = "descText" & gt; & Lt; P & gt; Description text to be shown on click & lt; / P & gt; & Lt; / Div & gt; & Lt; / Div & gt;
& lt; Script & gt; Function show () {document.getElementById ('descText'). Style.display = "block"; Document.getElementById ('hidebox'). Style.display = "block"; Document.getElementById ('Showbox'). Style.display = "none"; } Hide the function () {document.getElementById ('descText'). Style.display = "none"; Document.getElementById ('hidebox'). Style.display = "none"; Document.getElementById ('Showbox'). Style.display = "block"; } & Lt; / Script & gt;
#desctext {display: none; Border-bottom-style: solid; Border-width: 2px; Border-color: #CCC; Margin: 0px; Padding: 0 px 7px; } .showHide {width: 100%; Margin: 0px; } Input # Hide {Display: None; Margin-left: auto; Margin-Correct: Auto; } Input # Showbox {dispay: block; Margin-left: auto; Margin-Correct: Auto; } Input [type = button] {background color: transparent; Font: heirs; Color: # 999; Width: 100%; Padding: 15px 0 pixels; Border style: solid; Border-left-width: 1px; } Input [type = button]: hover {background-color: # F60; Color: #fff; }
& lt; Div id = "description" & gt; & Lt; Div class = "showHide" & gt; & Lt; Input id = "showbox" type = "button" value = "show app description" / & gt; & Lt; Input id = "hidebox" type = "button" value = "hide details" / & gt; & Lt; / Div & gt; & Lt; Div id = "descText" & gt; & Lt; P & gt; Description text to be shown on click & lt; / P & gt; & Lt; / Div & gt; & Lt; / Div & gt; $ (Function () {$ ( '# Showbox') click (function () {$ ( '# descText'). Slide down (); $ ( '# hidebox'). Slaiddaun (); $ ( '# Showbox Click '$ (' # Hidebox ') (function () {$ (' # descText '). Hide (); $ (' # hidebox ') Hide (); $ (' #showbox '). SlideDown () ;});});
Comments
Post a Comment