Show/Hide button loses styling on some browsers when clicked

Question

I have a show/hide button on a simple webpage, which calls a script to unhide text that is display:none; by default, whilst also replacing the "show" button with a "hide".

However on some browsers (most notably mobile browsers), when I click to show, the button then loses it's styling properties and does not work properly.

Here is the html:

<div id="description">
   <div class="showHide">
    <input id="showbox" type="button" onclick="show()" value="Show App Description" />
    <input id="hidebox" type="button" onclick="hide()" value="Hide Description" />
    </div>
    <div id="descText">
        <p>Description Text that is to be shown on click</p>
    </div>
</div>

the script:

<script>
function show() {
    document.getElementById('descText').style.display = "block";
    document.getElementById('hidebox').style.display = "block";
    document.getElementById('showbox').style.display = "none";
}
function hide() {
    document.getElementById('descText').style.display = "none";
    document.getElementById('hidebox').style.display = "none";
    document.getElementById('showbox').style.display = "block";
}
</script>

and the css:

 #descText {
    display:none;
    border-bottom-style:solid;
    border-width:2px;
    border-color:#CCC;
    margin:0px;
    padding:0px 7px;
}
.showHide {
    width:100%;
    margin:0px;
}

input#hidebox {
    display:none;
    margin-left:auto;
    margin-right:auto;
}

input#showbox {
    dispay:block;
    margin-left:auto;
    margin-right:auto;
}

input[type=button] {
    background-color:transparent;
    font:inherit;
    color:#999;
    width:100%;
    padding:15px 0px;
    border-style:solid;
    border-left-width:1px;
}

input[type=button]:hover {
    background-color:#F60;
    color:#FFF;
}

I'm at a total loss, I cannot even identify what the problem could be!

Thanks in advance for any help.

Answer 1

jQuery could be a lot easier and cross browser compatible.

http://jsfiddle.net/gRha8/

I added the slide down effect. If you do not want it, you can just replace with .show();

<div id="description">
    <div class="showHide">
        <input id="showbox" type="button" value="Show App Description" />
        <input id="hidebox" type="button" value="Hide Description" />
    </div>
    <div id="descText">
        <p>Description Text that is to be shown on click</p>
    </div>
</div>

$(function () {
    $('#showbox').click(function () {
        $('#descText').slideDown();
        $('#hidebox').slideDown();
        $('#showbox').hide();
    });

    $('#hidebox').click(function () {
        $('#descText').hide();
        $('#hidebox').hide();
        $('#showbox').slideDown();
    });
});

Answer 2

Well when you click them, they are going to lose styling properties? You set their display to none once they have been clicked, thus they disappear. This is a lot easier to do with jQuery btw. The code for it is:

$(document).ready(function() {
    $("#showBox").show();
    $("#hideBox").hide();

    $("#showBox").click(function() {
        $("#descText").show();
        $("#hideBox").show();
        $("#showBox").hide();
    });

    $("#hideBox").click(function() {
        $("#descText").hide();
        $("#hideBox").hide();
        $("#showBox").show();
    });
});

Simples? That way its done in javascript/jquery and you can leave css to simply styling the buttons and nothing else! You then just need to link the jquery library to your webpage. A simple google search will tell you how to do that.