HTMLCollection and Nodelist show() - KirkGarcia182/domExtend GitHub Wiki

show()

Description

Changes the display of all the elements within the collection depending on the passed parameter. If no parameter was passed then it will change the display to inherit

Syntax

collection.show([display]);

Parameters

display (Optional) - A String that represents what the display value is for all the elements within the collection.

Return Value

The collection you just manipulated so you can chain these methods.

Example

<!DOCTYPE html>
<html>
<head>
	<title>domExt Examples</title>
</head>
<body>
	<div id="app">
		<div class="menus">
			<ul id='menuList1'>
				<li><a class='menuLink'>Menu 1</a></li>
				<li><a class='menuLink'>Menu 2</a></li>
				<li><a class='menuLink'>Menu 3</a></li>
			</ul>
		</div>
	</div>
	<script type="text/javascript" src="domExt.js"></script>
	<script type="text/javascript">
		window.$ = document;

		let collection = $.qsa('.menuLink');
		collection.hide();

		collection.show();
		console.log(collection);
		/* Result
			<li><a class='menuLink' style='display: inherit'>Menu 1</a></li>
			<li><a class='menuLink' style='display: inherit'>Menu 2</a></li>
			<li><a class='menuLink' style='display: inherit'>Menu 3</a></li>
		*/

		collection.hide();

		collection.show('block');
		console.log(collection);
		/* Result
			<li><a class='menuLink' style='display: block'>Menu 1</a></li>
			<li><a class='menuLink' style='display: block'>Menu 2</a></li>
			<li><a class='menuLink' style='display: block'>Menu 3</a></li>
		*/
	</script>
</body>
</html>