Member Avatar for luweegee

Hello Guys!

What Kind of Tag is this?

wat_is_this.png 6.1 KB
  • 5 Contributors
  • 12 Replies
  • 181 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by Dandello

Dani AI

Generated

This thread shows a nested menu where a triangular marker expands and collapses a sublist. was right that the visible structure is a list, and correctly raised the possibility that a server-side control could be generating the HTML. For a robust, modern solution that avoids fragile ID-based toggles and improves accessibility, prefer semantic markup or an explicit, keyboard-focusable control instead of swapping images or directly manipulating inline styles.

HTML5 provides a simple semantic option with built-in keyboard support:

<details>
  <summary>Category</summary>
  <ul>
    <li>First item</li>
    <li>Second item</li>
  </ul>
</details>

The <summary> element is the clickable control and <details> handles the open/closed state. Styling and custom markers are handled in CSS; the element degrades gracefully where not supported.

If server-side rendering or older-browser support is required, use an explicit control pattern (button + aria-expanded + hidden) and avoid duplicate IDs when generating menus in a loop. Example pattern:

<li>
  <button class="toggle" aria-expanded="false" aria-controls="sub-1">></button>
  <ul id="sub-1" hidden>
    <li>Item A</li>
  </ul>
</li>

<script>
document.addEventListener('click', function(e){
  if (!e.target.classList.contains('toggle')) return;
  var btn = e.target;
  var panel = document.getElementById(btn.getAttribute('aria-controls'));
  var expanded = btn.getAttribute('aria-expanded') === 'true';
  btn.setAttribute('aria-expanded', String(!expanded));
  panel.hidden = expanded;
});
</script>

Quick diagnostics tied to posts above: inspect the rendered DOM (browser DevTools) to see what markup is actually emitted, ensure looped markup uses unique IDs or data attributes, and prefer event delegation so handlers still work when items are generated dynamically. For accessibility, use button or <summary> controls so keyboard and screen-reader users get a consistent experience.

Recommended Answers

All 12 Replies

Member Avatar for Dandello

Looks like a list with a secondary list and triangle images replacing the default disks.

Member Avatar for luweegee

I'm looking for the tag can you do that?

Member Avatar for Dandello

It's a list:

<ul><li>first item</li>
<li>Seconnd item</li>
<li>Third item 
<ul><li>Three -a</li>
<li>three -b</li>
</ul></li></ul>

the css for replacing the default marker with an image

list-style-image: url(image.gif);
Member Avatar for luweegee

that triangle is clickable if you click that it will show the list...then if you click again the list will hide...

Edited by luweegee because: n/a
Member Avatar for luweegee

ok i find the code here it is...

<script type="text/javascript">
function switchit(list){
var listElementStyle=document.getElementById(list).style;
if (listElementStyle.display=="none"){
listElementStyle.display="block";
}
else {
listElementStyle.display="none";
}
}
</script>
<ul>
    <li id="tutorioli">
       <ul>
          <li><a href="">View All</a></li>
          <li><a href="">Announcements.</a></li>
          <li><a href="">Featured.</a> </li>
          <li><a href="">Linkage.</a>  </li>
       </ul>
    </li>
    <li id="tutorialsli">
        <ul >
          <li><a href="">View All</a></li>
          <li><a href="">Clientside.</a></li>
          <li><a href="">Flash.</a></li>
          <li><a href="">Marketing-SEO.</a></li>
          <li><a href="">Photoshop.</a></li>
          <li><a href="">Serverside.</a>    </li>
         </ul>
      </li>
    </ul>
Edited by luweegee because: n/a
Member Avatar for luweegee

haha this is not working under the loop in php i dont know why haha....

Member Avatar for Dandello

Your javascript is calling for an item with an id of 'list' I don't see it in your ul code.

Member Avatar for Paulsoninvest

by css3 you can do this menu

Member Avatar for luweegee

can you post your code here or any link?

Thanks in advance

Edited by luweegee because: n/a
Member Avatar for lalit aseri 1

what is html tag's and tree protacol

Member Avatar for go2sesha

Hello Guys!

What Kind of Tag is this?

HEy dude...! its not a html tag...! its an ASPX DATA control ( XML driven data)

Member Avatar for Dandello

HEy dude...! its not a html tag...! its an ASPX DATA control ( XML driven data)

Given that the original reference was to an image showing text and graphics without any code or page reference or clue as to the properties of the original, one could state it's simply an image. OR it's a list with styled markers OR it's a dynamically reactive list using javascript and styled markers OR...

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.