CODEWITHSUNDEEP
javascripthtml
1x2x3x4x
1x2x3x4x

Reputation: 604

JS function won't hide element

I'm trying to hide or show a div when clicking on a link.

This is the HTML part that I want to show or hide:

<div id="product">
    <div ng-repeat="producto in productos" >     
            <figure class="floating">
              <img  ng-src="{{ producto.image }}" alt="image" class="rcorners3" style='width:100%;' border="0" alt="Null">
              <figcaption> {{ producto.name }}</figcaption>
            </figure>
    </div>
</div>

When clicking this:

<li onclick="isitvisible()" class="guides">

And this is the script I run when clicking:

<script type="text/javascript">
    function isitvisible() {
        var vale = document.getElementById('product').offsetLeft;

        if (vale <= 0) {
            document.getElementById('product').style.visibility='hidden';
        } else { 
            document.getElementById('product').style.visibility='visible';
        }       
    }         
</script>

The div would hide but not show at all after clicking. I think I'm failing with the offsetLeft but not sure.

Upvotes: 0

Views: 111

Answers (2)

Legionar
Legionar

Reputation: 7597

Change it to this:

<script type="text/javascript">
    var style = document.getElementById('product').style;
    function isitvisible() {
        if (style.display=='none') {
            style.display='block';
        } else { 
            style.display='none';
        }       
    }         
</script>

Upvotes: 1

Cerbrus
Cerbrus

Reputation: 72857

offsetLeft doesn't change when you toggle a element's visibility.

Try this isitvisible function instead:

function isitvisible() {
    // Get a reference to the element's style.
    var style = document.getElementById('product').style;

    if (style.visibility === 'hidden') {
        style.visibility = 'visible';
    } else { 
        style.visibility = 'hidden';
    }       
}

Or a little shorter:

function isitvisible() {
    var style = document.getElementById('product').style;
    style.visibility = (style.visibility === 'hidden') ? 'visible' : 'hidden';       
}

Upvotes: 5

Related Questions