How to show style="display:none" div element permanently?

Question

I want to show a display:none element on a click of anchor tag using jQuery show() function.

But it's showing the div element for a moment and then vanished I used return false and preventDefault functions but it stops the redirection of anchor tag to a certain page.

How I can solve this?

  <div id="assetlist" style="display:none">
                    @{
                        Html.RenderPartial("~/Views/Asset/_Asset_List.cshtml");
                    }
                    <!-- /.sidebar-menu -->
                </div>

    <script>
    $(document).ready(function () {
    $(".asset_managment").click(function(){
        $("#assetlist").show();
    });

});
</script>

    <li class="nav-link" >
        <a href="@Url.Action("Index", "Asset")" class="asset_managment">
            <img class="img_position" src="@Url.Content("~/admin-lte/img/asset_managment_icon.png")" width="50" height="50" />    Asset Managment
        </a>
    </li>

Use `.hide()` instead of `.show()` [See the example here](https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_show_hide) — Sameer, Mar 05 '20 at 05:03

score 0 · Answer 1 · answered Mar 05 '20 at 05:10

0

You can do like this

$(document).ready(function() {
    $(".asset_managment").on('click', function(e) {
        e.preventDefault();
        $("#assetlist").show();
    });
});

<div id="assetlist" style="display:none">
    Show me
</div>

<li class="nav-link" >
    <a href="anything" class="asset_managment">
        click me
    </a>
</li>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>

answered Mar 05 '20 at 05:10

Nisharg Shah

16,638
10
62
73

Its vanished because of redirection or what? – Nisharg Shah Mar 05 '20 at 05:12
no, it's not working because when I used preventDefault before show() function the show() will not work – Mar 05 '20 at 05:14
if you put `show()` function before` e.preventDefault()` or after, It will works for both case – Nisharg Shah Mar 05 '20 at 05:17
I uploaded the gif – Mar 05 '20 at 05:42

score 0 · Accepted Answer · answered Mar 05 '20 at 06:23

Could you just try:

 $(document).ready(function () {
    $(".asset_managment").click(function(){
        $("#assetlist").attr('style', 'display:block !important');
    });

});

this is just gonna overwrite the display property of your div's inline style. hope this helps

How to show style="display:none" div element permanently?

2 Answers2