hide and display a div using javascript in ASP.NET

Question

I want display an audio player, after click a button. here my code

<script type="text/javascript">
    function viewAudio() {
        document.getElementById('myAudio').style.display = ""
    }
    document.getElementById('myAudio').style.display = "none"


</script>

<button value="@Html.DisplayFor(modelItem => item.SampleURL)" id="audioViewer" onclick="viewAudio()">
            <img src="../../Content/images/audio.png"></button>

<div id="myAudio">
<audio controls preload="none">
    <source src="#" type="audio/mp3">
</audio>
</div>

But, when i run in browser it still display the audio player. any solution for this?

I know nothing about ASP.NET, but if it is an extend of HTML, by the time your <script> is executed, there's no document.getElementById('myAudio') since it's not loaded yet, so your style will not apply (and an error should raise). — Passerby
– Passerby, Commented Jul 18, 2013 at 5:11

user447356 · Accepted Answer · 2013-07-18 12:48:50Z

3

First of all, to have the player hidden by default you don't need to use JavaScript. Add such style to the container instead:

 <div id="myAudio" style="display: none;">

And to show it back upon clicking the button:

function viewAudio() {
    document.getElementById('myAudio').style.display = "block";
}

answered Jul 18, 2013 at 12:48

user447356

Sign up to request clarification or add additional context in comments.

Comments

Chris · Accepted Answer · 2013-07-18 05:09:04Z

0

If this is an ASP page then that button click might be doing a postback. This will reset the state. You should have either return false; at the end of the onclick.

Alternatively, if the problem is that the div is never hidden, you can set the style directly on the div element in the html markup.

Make sure that you are using your browser's development tools to check the css styling currently on the element you're looking at. You can also set breakpoints and step through your javascript code, right in your browser.

answered Jul 18, 2013 at 5:09

Chris

7075 silver badges14 bronze badges

Comments

Zuhair Ali · Accepted Answer · 2016-11-25 10:43:28Z

0

<asp:Button ID="ButtonShowPanel" CausesValidation="false" CssClass="btn btn-primary pull-right" runat="server" Text="Add Contact" OnClientClick="javascript:SetVisiblityPanels(false); return false;" />

        function SetVisiblityPanels(check) {
            if (check) {
                $('.SearchPanel').show(1000);
                $('.DescriptionPanel').hide(1000);
            }
            else {
                $('.SearchPanel').hide(1000);
                $('.DescriptionPanel').show(1000);
            }
        }

answered Nov 25, 2016 at 10:43

Zuhair Ali

176 bronze badges

Comments

score 0 · Accepted Answer · 2023-02-24 20:32:02Z

0

 <script type="text/javascript">
    function CheckVisiblityPanels(check) {
        if (check) {           
        {                     
        document.getElementById('<%=myAudio.ClientID%>').style.display = "block";                
        }
        else
        {
        document.getElementById('<%=myAudio.ClientID%>').style.display = "none";               
        }
        return false;
    }
};
</script>

edited Feb 24, 2023 at 20:32

answered Feb 24, 2023 at 20:26

user20178351

Collectives™ on Stack Overflow

hide and display a div using javascript in ASP.NET

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related