Show and hide links based on button click
By: Niraj in Javascript Tutorials on 2023-04-17
Here is a code snippet that should show and hide the links based on the button clicked:
<!DOCTYPE html>
<html>
<head>
<title>Links</title>
<style>
.links {
display: none;
}
</style>
</head>
<body>
<div>
<button onclick="toggleLinks('category1')">Category 1</button>
<button onclick="toggleLinks('category2')">Category 2</button>
<button onclick="toggleLinks('category3')">Category 3</button>
<button onclick="toggleLinks('category4')">Category 4</button>
<button onclick="toggleLinks('category5')">Category 5</button>
<button onclick="toggleLinks('category6')">Category 6</button>
<button onclick="toggleLinks('category7')">Category 7</button>
</div>
<div class="category1 links">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<!-- Add more links as needed -->
</div>
<div class="category2 links">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<!-- Add more links as needed -->
</div>
<div class="category3 links">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<!-- Add more links as needed -->
</div>
<div class="category4 links">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<!-- Add more links as needed -->
</div>
<div class="category5 links">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<!-- Add more links as needed -->
</div>
<div class="category6 links">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<!-- Add more links as needed -->
</div>
<div class="category7 links">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<!-- Add more links as needed -->
</div>
<script>
function toggleLinks(category) {
var links = document.getElementsByClassName('links');
for (var i = 0; i < links.length; i++) {
if (links[i].classList.contains(category)) {
if (links[i].style.display === 'block') {
links[i].style.display = 'none';
} else {
links[i].style.display = 'block';
}
} else {
links[i].style.display = 'none';
}
}
}
</script>
</body>
</html>
This code uses the display CSS property to hide and show the link divs based on the category button clicked. When a button is clicked, it loops through all the link divs and only shows the links in the selected category, while hiding the links in all other categories.
Add Comment
Insert Bullet List
Please enter at least one item.
Item:
Item:
Item:
Item:
Item:
Insert Numeric List
Please enter at least one item.
Item:
Item:
Item:
Item:
Item:
Insert Link
Please enter the link of the website
Optionally you can add display text
Insert Email
Please enter the email address
Optionally add any display text
Insert Image
Please enter the link of the image
Insert YouTube Video
Please enter the link of the video
Privacy Policy
This policy contains information about your privacy. By posting, you are declaring that you understand this policy:
- Your name, rating, website address, town, country, state and comment will be publicly displayed if entered.
- Aside from the data entered into these form fields, other stored data about your comment will include:
- Your IP address (not displayed)
- The time/date of your submission (displayed)
- Your email address will not be shared. It is collected for only two reasons:
- Administrative purposes, should a need to contact you arise.
- To inform you of new comments, should you subscribe to receive notifications.
- A cookie may be set on your computer. This is used to remember your inputs. It will expire by itself.
This policy is subject to change at any time and without notice.
Terms and Conditions
These terms and conditions contain rules about posting comments. By submitting a comment, you are declaring that you agree with these rules:
- Although the administrator will attempt to moderate comments, it is impossible for every comment to have been moderated at any given time.
- You acknowledge that all comments express the views and opinions of the original author and not those of the administrator.
- You agree not to post any material which is knowingly false, obscene, hateful, threatening, harassing or invasive of a person's privacy.
- The administrator has the right to edit, move or remove any comment for any reason and without notice.
Failure to comply with these rules may result in being banned from submitting further comments.
These terms and conditions are subject to change at any time and without notice.
{"commentics_url":"\/\/www.java-samples.com\/comments\/","page_id":21413,"enabled_country":false,"country_id":0,"enabled_state":false,"state_id":0,"enabled_upload":false,"maximum_upload_amount":3,"maximum_upload_size":5,"maximum_upload_total":5,"captcha":false,"captcha_url":"https:\/\/java-samples.com\/comments\/frontend\/index.php?route=main\/form\/captcha&page_id=21413","cmtx_wait_for_comment":"cmtx_wait_for_comment","lang_error_file_num":"A maximum of %d files are allowed to be uploaded","lang_error_file_size":"Please upload files no bigger than %.1f MB in size","lang_error_file_total":"The total size of all files must be less than %.1f MB","lang_error_file_type":"Only image file types are allowed to be uploaded","lang_text_loading":"Loading ..","lang_placeholder_country":"Country","lang_placeholder_state":"State","lang_text_country_first":"Please select a country first","lang_button_submit":"Add Comment","lang_button_preview":"Preview","lang_button_remove":"Remove","lang_button_processing":"Please Wait.."}
{"commentics_url":"\/\/www.java-samples.com\/comments\/","auto_detect":false}
Comments