Member Avatar for PinoyDev

hi.!!I have been developing an online enrolment system for a client in php...ive encountered a problem during the middle situation.The client added a situation that when the student click on the first year link, the subject of that year will just pop-up under the link.example:

first year
- Filipino
- Math
- Science

When the user click first year, the filipino,math, and science will appear, and will dissapear when they click another link.

Please help i dont know how to do this.!

  • 3 Contributors
  • 6 Replies
  • 195 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by PinoyDev

Dani AI

Generated

A compact, modern, accessible alternative to the inline handlers shown earlier. was right that the behavior must be handled client-side, and ’s prototype demonstrates the idea but uses inline events and onblur/visibility hacks that can hide a panel while the user is interacting with its checkboxes. The pattern below keeps markup semantic, uses button + aria-expanded for accessibility, and uses unobtrusive JS to toggle one panel at a time.

<div class="year">
  <button type="button" data-target="year1" aria-expanded="false">First year</button>
  <div id="year1" data-panel hidden>
    <label><input type="checkbox" name="subjects[]" value="filipino"> Filipino</label><br>
    <label><input type="checkbox" name="subjects[]" value="math"> Math</label><br>
    <label><input type="checkbox" name="subjects[]" value="science"> Science</label>
  </div>
</div>

<script>
document.addEventListener('click', function (e) {
  const btn = e.target.closest('button[data-target]');
  if (!btn) return;
  const panel = document.getElementById(btn.dataset.target);
  const wasOpen = !panel.hidden;
  document.querySelectorAll('[data-panel]').forEach(p => p.hidden = true);
  document.querySelectorAll('button[data-target]').forEach(b => b.setAttribute('aria-expanded','false'));
  if (!wasOpen) { panel.hidden = false; btn.setAttribute('aria-expanded','true'); }
});
</script>

Notes and practical tips: wrap the checkboxes in a form (use name="subjects[]") so PHP receives an array after submit, or POST selections via fetch() for AJAX saves. Avoid onblur on the trigger element since it often closes the panel while focus moves into the panel. Place scripts at the end of the body or use DOMContentLoaded. For a zero-JS, accessible fallback, HTML5 <details>/<summary> can be used. Debugging checklist: open the browser console for errors, ensure IDs are unique, and verify aria-expanded matches the visible state for screen readers.

Recommended Answers

All 6 Replies

Member Avatar for humbug

As PHP is a server side language, PHP can't be used to modify the page once it has been sent to the browser. You need a client side language (that is executed by the viewers browser) such as Javascript to do what you are explaining. I haven't done much with javasript so I can't help you any further.

Member Avatar for almostbob 
<html>
<head>
<style>
.year { width:25%; margin:3%; padding:3%; float:left; }
</style>
<script language="javascript" type="text/javascript">
<!--
(document.getElementById) ? dom = true : dom = false;
function hideIt(layer) {
 if (dom) {document.getElementById(layer).style.visibility='hidden';} //ie
 if (document.layers) {document.layers[layer].visibility='hide';} } //mozilla
function showIt(layer) {
 if (dom) {document.getElementById(layer).style.visibility='visible';} //ie
 if (document.layers) {document.layers[layer].visibility='show';} } //mozilla
onResize="window.location.href = window.location.href"
//--></script>
</head>
<body>
<noscript> This form requires Javascript to process</noscript>
<div class='year'>
<a href='#' onfocus="showIt('firstyear');" onclick="showIt('firstyear');"  onblur="hideIt('firstyear');" taborder=1>First Year</a> <!-- onfocus onclick allows for keyboard tab as well as mouseclick-->
<div id='firstyear' style='visibility:hidden'> <!-- initially invisible -->
<input type='checkbox' value='filipino'>filipino<br>
<input type='checkbox' value='math'>math<br>
<input type='checkbox' value='sci'>science<br>
</div></div>
<div class='year'>
<a href='#' onfocus="showIt('secondyear');" onclick="showIt('secondyear');"  onblur="hideIt('secondyear');" taborder=2>second Year</a> 
<div id='secondyear' style='visibility:hidden'> 
<input type='checkbox' value='filipino'>2filipino<br>
<input type='checkbox' value='math'>2math<br>
<input type='checkbox' value='sci'>2science<br>
</div></div>
<div class='year'>
<a href='#' onfocus="showIt('thirdyear');" onclick="showIt('thirdyear');"  onblur="hideIt('thirdyear');" taborder=3>third Year</a> 
<div id='thirdyear' style='visibility:hidden'>
<input type='checkbox' value='filipino'>3filipino<br>
<input type='checkbox' value='math'>3math<br>
<input type='checkbox' value='sci'>3science<br>
</div></div>
</body</html>

the javacript will hide or show any number of div span p textarea
Its been a long time since I coded anything new in javascript, if the script does not run, change the id='firstyear' to name='firstyear' edit** for tabulated data as
first year .. second year .. third year

Member Avatar for almostbob

i messed up
as above attempting to select a checkbox will hide them again, should be:: <a href='#' onfocus="showIt('firstyear');hideIt('secondyear');hideIt('thirdyear');" onclick="showIt('firstyear');hideIt('secondyear');hideIt('thirdyear');" tabindex=1>First Year</a>

Member Avatar for PinoyDev

thank you very much its working now..hope to see you again.!1

God bless.!

Member Avatar for PinoyDev

As PHP is a server side language, PHP can't be used to modify the page once it has been sent to the browser. You need a client side language (that is executed by the viewers browser) such as Javascript to do what you are explaining. I haven't done much with javasript so I can't help you any further.

Thank you for your advise>!!i will try to search and code this maybe tommorow in javascript.!

Member Avatar for PinoyDev 
<html>
<head>
<style>
.year { width:25%; margin:3%; padding:3%; float:left; }
</style>
<script language="javascript" type="text/javascript">
<!--
(document.getElementById) ? dom = true : dom = false;
function hideIt(layer) {
 if (dom) {document.getElementById(layer).style.visibility='hidden';} //ie
 if (document.layers) {document.layers[layer].visibility='hide';} } //mozilla
function showIt(layer) {
 if (dom) {document.getElementById(layer).style.visibility='visible';} //ie
 if (document.layers) {document.layers[layer].visibility='show';} } //mozilla
onResize="window.location.href = window.location.href"
//--></script>
</head>
<body>
<noscript> This form requires Javascript to process</noscript>
<div class='year'>
<a href='#' onfocus="showIt('firstyear');" onclick="showIt('firstyear');"  onblur="hideIt('firstyear');" taborder=1>First Year</a> <!-- onfocus onclick allows for keyboard tab as well as mouseclick-->
<div id='firstyear' style='visibility:hidden'> <!-- initially invisible -->
<input type='checkbox' value='filipino'>filipino<br>
<input type='checkbox' value='math'>math<br>
<input type='checkbox' value='sci'>science<br>
</div></div>
<div class='year'>
<a href='#' onfocus="showIt('secondyear');" onclick="showIt('secondyear');"  onblur="hideIt('secondyear');" taborder=2>second Year</a> 
<div id='secondyear' style='visibility:hidden'> 
<input type='checkbox' value='filipino'>2filipino<br>
<input type='checkbox' value='math'>2math<br>
<input type='checkbox' value='sci'>2science<br>
</div></div>
<div class='year'>
<a href='#' onfocus="showIt('thirdyear');" onclick="showIt('thirdyear');"  onblur="hideIt('thirdyear');" taborder=3>third Year</a> 
<div id='thirdyear' style='visibility:hidden'>
<input type='checkbox' value='filipino'>3filipino<br>
<input type='checkbox' value='math'>3math<br>
<input type='checkbox' value='sci'>3science<br>
</div></div>
</body</html>

the javacript will hide or show any number of div span p textarea
Its been a long time since I coded anything new in javascript, if the script does not run, change the id='firstyear' to name='firstyear' edit** for tabulated data as
first year .. second year .. third year

Thank you so much.its working now..hope to see you again.!

God bless.!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.