What type of coding is this please?

HTML & CSS
1

Does anyone know what type of coding this is please, for when you click on a link, more content shows, then when you click on another link, that previous one disapears and another appears? Similar to this:

2

Generally they fall under the headings of ‘accordions’

You will find loads of examples around on google.

Here’s one.

There are css only examples around but generally js is required to open and close the panels.

You can do similar in HTML using the details and summary elements but they won’t auto close a previous element.

1 Like
3

Thanks Paul, so I’ll be looking at jQuery Accordion.

1 Like
4

if you dont need MS support, you can do it natively:

<html>
	<head>
		<title>d</title>
		<style type="text/css" media="screen">
			details[open]{
				color:red;
			}
			details{
 				border:1px solid;
				width:50%;
			}
			summary{ margin-left:.5em;}
			p{ margin-left:.5em;}
		</style>
	</head>
	<body>
		 <details>
 			 <summary> am summary of #1</summary>
 			 <p>this is the details for #1, thestrucure is similare but notthe same as a whateevvr</p>
 			 <summary> am summary of #2</summary>
 			 <p> secon pargargra</p>
 			 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 		 </details>
	</body>
</html>

A little bleeding edge, (pun) I suppose. But I hope that helps.

2 Likes
5

Yes I mentioned that :slight_smile:

6

Thanks Dresden and Paul, two things, what is MS support and what is ‘natively’ please?

7

Dez,
all modern browsers BUT Edge and Explorer have native support. so you would need a shim ( since, MS will not immediately recognize the new tags, and some JS to emulate the action). That is , if you choose to go with the details tag approach.

8

Thanks Dresden, the inputs appreciated. So for it to be compatible with all browsers and on all devices, what precise coding is needed please?

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.