Show hide with php and javascript

Question

Show hide with php and javascript

Navigation

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

0

I have a code that lists a div with contents through foreach and echo in php, this div expands as I enter the data in it, I already have a js show / hide code that is working normally, but in that case it shows / hides only the 1 content with the foreach listing several.

Follow the codes used to do this.

Show / hide button

if (isset( $_POST['ID'] ) ) {
  echo "<div id='downloadbox'><a href=javascript:showhide('downloadlinks')>
  Arquivos</a>
  </div>";
}

Code to list div to be hidden

foreach($files as $file){
  if(!in_array($file,$exclude)){
    if (trim($IDD) == trim("121")){
      echo "<div id=downloadlinks>".$file."<div id=botaodownload><a href=baixar.php?arquivo=pasta/".$ID."/".$file.">Download<i class=material-icons>file_download</i></div></a>
      <div id=excluir><a href=deleta.php?delete=pasta/".$ID."/".$file." onclick='deletar( this, event );'>Excluir</a></div></div>";
    }else{
      echo "<div id=downloadlinks>".$file."<div id=botaodownload><a href=baixar.php?arquivo=pasta/".$ID."/".$file.">Download<i class=material-icons>file_download</i></div></a></div>";
    }
  }
}

JS SHOWHIDE

function showhide(id) {
  var e = document.getElementById(id);
  e.style.display = (e.style.display == 'inline-block') ? 'none' : 'inline-block';
}

php javascript html

asked by anonymous 13.09.2017 / 15:37

2 answers

Check if file exists through URL with .htaccess How to recover the image of the Storage folder using INTERVENTION IMAGE Laravel 5.2?

score 0 · Answer 1

The problem is that you left the static id as downloadlinks , in that location:

<div id='downloadbox'><a href=javascript:showhide('downloadlinks')>

The correct one would take the id that you are passed, thus:

<div id='downloadbox'><a href=javascript:showhide('<?php echo $_GET['ID']; ?>')>

In this case I used GET because it looks like you are passing the parameters through the url and if that is the correct thing would be to use GET to capture those values.

Your div should be given a unique id each, so you can leave it like this:

<div id='downloadlinks<?php echo $ID;?>'>

And change this from your JS to:

var e = document.getElementById("downloadlinks"+id);

score 0 · Answer 2

The first is the id attribute across multiple elements. In HTML, the id attribute must be unique on the page. Only the class attribute can be used repeatedly.

Regarding the function to show / hide the element, I did not understand if you want to hide ALL elements at the same time, or want to have individual control.

If you want to hide ALL elements at once, just create a DIV above of loop elements, for example:

function showhide(id) {
  var e = document.getElementById(id);
  e.style.display = (e.style.display == 'inline-block' || e.style.display == '') ? 'none' : 'inline-block';
}

<div id='downloadbox'>
  <a href="javascript:showhide('downloadlinks')">Mostrar/ocultar Arquivos</a>
</div>

<p>&nbsp;</p>

<div id="downloadlinks">
  <div id="download1" class="download">
    Arquivo1.ext
    <div class="botaodownload">
      <a href=baixar.php?arquivo=pasta/".$ID."/".$file.">
        Download
      </a>
    </div>
  </div>
  <div id="download2" class="download">
    Arquivo2.ext
    <div class="botaodownload">
      <a href=baixar.php?arquivo=pasta/".$ID."/".$file.">
        Download
      </a>
    </div>
  </div>
  <div id="download3" class="download">
    Arquivo3.ext
    <div class="botaodownload">
      <a href=baixar.php?arquivo=pasta/".$ID."/".$file.">
        Download
      </a>
    </div>
  </div>
</div>

Already to hide / display an individual item, replace the link in the above example with <a href="javascript:showhide('download1')"> (or download2, download3, and so on).

I also suggest that you review your code to see if you are opening and closing each tag correctly. In your loop some tags are being closed out of order. This does not give a visible error, but it generates instabilities and errors on larger pages.

I hope I have helped.