How can JavaScript be utilized to hide content on a frontend page in PHP without reloading the entire page?

To hide content on a frontend page in PHP without reloading the entire page, you can use JavaScript to manipulate the DOM. By toggling the display property of the element containing the content, you can show or hide it dynamically without refreshing the page. 

<?php
echo '<button onclick="toggleContent()">Toggle Content</button>';
echo '<div id="content" style="display: block;">This is the content to be hidden/shown</div>';
?>

<script>
function toggleContent() {
  var content = document.getElementById('content');
  if (content.style.display === 'none') {
    content.style.display = 'block';
  } else {
    content.style.display = 'none';
  }
}
</script>

Keywords

JavaScript hide content frontend page PHP reloading

Related Questions