Show Text and Hide text

Question

Show Text and Hide text

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I have this javascript and it works well in show and hide but I want it to only show what is selected but it shows in all the divs that I can do to compose that? I'm super new ... is this ..

<script>
    alert ("Sitió Web En Desarrollo")
    function info() {
        var x = document.getElementsByClassName("info-mas");
        for (var i = 0; i < x.length; i++) { 
            x[i].style.display = "block"; 
        }
    }
    function ocultarinfo() {
        var x = document.getElementsByClassName("info-mas");
        for (var i = 0; i < x.length; i++) { 
            x[i].style.display = "none"; 
        }
    }
</script>

<button type="button" class="mas-info" onclick="info()" >Mas Info +</button>
<div class="info-mas">
    <p align="center">  </p> 
    <p align="center">  </p> 
    <p align="center">  </p>
    <p align="center">  </p> 
    <p align="center">  </p> 
    <p align="center">  </p>
    <a href="javascript: void(0);" onclick="ocultarinfo()">Menos Info -</a>
</div>
<button type="button" class="mas-info" onclick="info()" >Mas Info +</button>
<div class="info-mas">
    <p align="center">  </p> 
    <p align="center">  </p> 
    <p align="center">  </p>
    <p align="center">  </p> 
    <p align="center">  </p> 
    <p align="center">  </p>
    <a href="javascript: void(0);" onclick="ocultarinfo()">Menos Info -</a>
</div>

javascript html

asked by Alst Adm 17.10.2018 в 05:46

source

2 answers

0

<script>
    function info(estado) {
        var x = document.getElementsByClassName("info-mas");
        switch(estado){
            case 'menos':
                x[0].style.display = "none"; 
            break;
            case 'mas':
               x[0].style.display = "block"; 
            break;
        }

    }
</script>

<button type="button" class="mas-button" onclick="info('mas')" >Mas Info + 
</button>
<div class="info-mas" style="display:block;">
    <p align="center">  </p> 
    <p align="center">  </p> 
    <p align="center">  </p>
    <p align="center">  </p> 
    <p align="center">  </p> 
    <p align="center">  </p>
    <a href="javascript: void(0);" onclick="info('menos')">Menos Info -</a>
</div>

answered by 17.10.2018 в 06:59

Can a DAO be called by a Repository? Two span, one with icon and the other with text, makes me a line jump using the d-none d - * - block MD Bootstrap

score 1 · Accepted Answer

The problem is that in your function you use getElementsByClassName to find the item you want to show / hide. But there is more than one element with the same class.

What you need to do is to differentiate in some way the elements to show / hide.

I made the following changes to your code:

I add the attribute data-id to the items that are displayed and hidden.
I add the parameter id to the functions info and ocultarinfo .
I replace the getElementsByClassName method with querySelectorAll to make a more accurate search of the elements (by class and value of the data-id attribute).

Staying this way:

function info(id) {
    var x = document.querySelectorAll('.info-mas[data-id="' + id + '"]');
    for (var i = 0; i < x.length; i++) { 
        x[i].style.display = "block"; 
    }
}
function ocultarinfo(id) {
    var x = document.querySelectorAll('.info-mas[data-id="' + id + '"]');
    for (var i = 0; i < x.length; i++) { 
        x[i].style.display = "none"; 
    }
}

<button type="button" class="mas-info" onclick="info('1')" >Mas Info +</button>
<div class="info-mas" data-id="1">
    <p align="center">texto</p> 
    <p align="center">  </p> 
    <p align="center">  </p>
    <p align="center">  </p> 
    <p align="center">  </p> 
    <p align="center">  </p>
    <a href="javascript: void(0);" onclick="ocultarinfo('1')">Menos Info -</a>
</div>
<button type="button" class="mas-info" onclick="info('2')" >Mas Info +</button>
<div class="info-mas" data-id="2">
    <p align="center">texto</p> 
    <p align="center">  </p> 
    <p align="center">  </p>
    <p align="center">  </p> 
    <p align="center">  </p> 
    <p align="center">  </p>
    <a href="javascript: void(0);" onclick="ocultarinfo('2')">Menos Info -</a>
</div>