Hide/Show HTML content using PHP

Question

I am very new to PHP and I am trying to get a piece of PHP code to run inside of my HTML file.

I have a drop down menu. If users select one item, it should display additional fields. So, I want them to only display if they select that item from the drop down menu. I am trying to select it based on the value for that drop down item. I have not declared any PHP values in a PHP script. This is all in HTML.

I know that with jquery you have to pull in the jquery library before running the script. Do I need to do this with PHP also?

Here is the code that I am trying to run:

Thank you in advance!

html file

<?php
  if ($dropmenuValue == specificDropDownOption) {
?>
  <div>
    -conditional content-
  </div>
<?php
  }
?>

Answer 1

One of the main things about PHP and other server-side languages is that once they render the page, they shut down, and that's it. There's nothing they can do after.

You need to resort to a client-side here, probably the simplest way being adding the values of PHP variables to the appropriate JavaScript variables and then taking it from there. You would also need to render all possible contents and only show what you need.

So, in your case, you could make a CSS class to denote hidden content and then use JavaScript to hide/show different parts of the markup. Please note that all the hidden code (rendered by PHP, but hidden by CSS) is still visible in the page source, so if you have anything sensitive in there you should definitely do it by either making AJAX calls to load partial content, or regular page redirection/navigation.

---

EDIT

Here is a super-simple example I made for you, to see how you can show/hide content:

HTML (parts can be rendered by PHP, of course)

<div id="content1" class="content">Hey</div>
<div id="content2" class="content hidden">There</div>
<div id="content3" class="content hidden">World</div>
<hr />
<button onclick="show(1)">Show 1</button>
<button onclick="show(2)">Show 2</button>
<button onclick="show(3)">Show 3</button>

JS

function show(id) {
    // select all the content divs
    var allDivs = document.getElementsByClassName('content');
    // iterate over them and add a hidden class to each
    for (var i = 0; i < allDivs.length; i++){
        allDivs[i].classList.add('hidden');
    }
    // finally, remove the hidden class from the one we referenced
    document.getElementById('content' + id).classList.remove('hidden');
}

See it in action here: http://jsfiddle.net/f0onk7bk/

Answer 2

You can try something out with this... While using HTML inside of the PHP

#item { display: block;}


#itme.active { display:none  }

Answer 3

Something like this would work when the page was loaded/reloaded...

<?php

  if(isset($_POST['dropdown_name_here']) && $_POST['dropdown_name_here'] == "specificParameter")
  {
     echo("<div id='condition_one_div'> ... </div>");
  }
  else
  {
    echo("<div id='condition_two_div'> ... </div>");
  }

?>

... but JavaScript is what you would want to use for dynamic content I would think.

var div = document.getElementById('div_name_here');
var dropdown = document.getElementById('dropdown_name_here');
if(dropdown.value == "specificParameter")
{
    //add/show content for div here
}
else
{
    //hide content for div here
}

is this what you are looking for?

<select id='dropdown_name' onchange='if(this.value == "parameter"){ document.getElementById("div_name").style.display = "block"; }else{ document.getElementById("div_name").style.display = "none"; }' >
</select>