Vis priya Vis priya - 5 months ago 8
jQuery Question

How to check a hide an element inside element on click using jquery(not duplicate)?

I have a

div
with an
i
tag:

<div class="accordion-heading datalist" data-toggle="collapse" data-parent="#accordion2" href="#@i.Id">div
<i class="fa fa-chevron-down table-middle" aria-hidden="true">i tag</i>
</div>


On first click of the
div
the
i
tag should disappear, on next click of the
div
the
i
tag should appear again. How can I do that?

Answer

You can use toggle() to achieve that:

$('.accordion-heading').click(function() {
    $(this).find('i').toggle();
});

Note that depending on your styling rules, it may be hard and/or impossible to click the div element with the i hidden as it will have no height. To fix that you can set a min-height rule on the div, or put a non-breaking space (&nbsp;) in it.

I want to switch between display: none and display: tablecell

In this case you have to manage the display value yourself, like this:

$('.accordion-heading').click(function() {
    $(this).find('i').css('display', function(i, d) {
        return d == 'none' ? 'tablecell' : 'none';
    })
});