CODEWITHSUNDEEP
c#javascriptjqueryasp.net-mvcasp.net-mvc-3
Sampath1750
Sampath1750

Reputation: 11

How to make div visible and not visible

How to make div visible & not visible after clicking button in MVC3.

Upvotes: 1

Views: 7103

Answers (4)

utsikko
utsikko

Reputation: 1545

You could also check the status of the div, whether is hidden or visible, and use the same button to show or hide it. In addition, you can change the caption of the button accordingly:

        $('#button1').click(function() {
            if ($('#id1').is(':hidden')) {
                $('#id1').show();
                $('#button1').val('hide');
            } else {
                $('#id1').hide();
                $('#button1').val('show');
            }
        });

Upvotes: 4

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196236

Visible/Invisible and at the same time removing the space that the element occupies in the page

$('#someid').toggle(); // to toggle between visible/invisible

or $('#someid').show(); and $('#someid').hide();

If you want to make visible/invisible but maintain the space the element occupies then use $('#someid').css({visibility:'hidden'}); and $('#someid').css({visibility:'visible'});

But the most correct way in both cases is to create a css class and add that class or remove it from the element

CSS rule 

.hidden{ display:none; }

and use $('#someid').addClass('hidden') and $('#someid').removeClass('hidden')

Upvotes: 3

gdoron
gdoron

Reputation: 150303

Asp.net-MVC uses jQuery be default, so this is the jQuery version:

$('#buttonId').click(function(){
     $('#divId').toggle();
});

Upvotes: 2

Ajeesh M
Ajeesh M

Reputation: 2092

Better do it in client side with Javasctipt

//to hide element
document.getElementById("MyElement").style.display = "none";
//to show element
document.getElementById("MyElement").style.display = "inline";
// where MyElement is id of your div

Upvotes: 0

Related Questions