I was about to drop a question, but I actually noticed my error and I solved it. So instead of deleting this post I'll post it to help some people out there.[The error was I wrote getElemenstByClassName(), instead of getElementsByClassName() which is funny and depressing at the same time]
Also, show / bring back divs button is also there.
Here is the code:
var y = document.getElementsByClassName('ex')
var i;
function removeSamples() {
for (i = 0; i < y.length; i++) {
y[i].style.display = 'none';
}
}
function hideSamples() {;
for (i = 0; i < y.length; i++) {
y[i].style.opacity = '0%';
}
}
function removeSamples2() {
for (i = 0; i < y.length; i++) {
y[i].style.display = 'block';
}
}
function hideSamples2() {;
for (i = 0; i < y.length; i++) {
y[i].style.opacity = '100%';
}
}
body {
background-color: rgb(25, 25, 25);
}
img,
.ex1,
.ex2,
.ex3,
.ex4,
.ex5 {
height: 150px;
width: 150px;
}
p {
color: rgb(255,0,0);
}
<button type="button" onclick="removeSamples()">Remove Samples</button>
<button type="button" onclick="hideSamples()">Hide Samples</button>
<button type="button" onclick="removeSamples2()">Bring back Samples</button>
<button type="button" onclick="hideSamples2()">Show Samples</button>
<div class="ex">
<img class="ex1" src="https://64.media.tumblr.com/af3438bac361d21ee1013338e4489b6f/b6f413ba8130992f-76/s1280x1920/0c9dab7eacac2a07eba7f340690514654d3e7aae.jpg">
</div>
<div class="ex">
<img class="ex2" src="https://i.pinimg.com/736x/a7/8d/e7/a78de7602e65161098cf1713da457e7a.jpg">
</div>
<div class="ex">
<img class="ex3" src="https://i.pinimg.com/originals/ec/83/3d/ec833d04025d2ca263df3b04bbc8723c.jpg">
</div>
<div class="ex">
<img class="ex4" src="https://i.pinimg.com/originals/cc/b7/e9/ccb7e9b09ec4a48478b2ff9561010000.png">
</div>
<div class="ex">
<img class="ex5" src="https://i.pinimg.com/originals/5b/cd/01/5bcd015992afa05979c8b9b448fb2939.jpg">
</div>
<p>Text</p>
Hi opacity get value between 0 and 1
but you used 0% and 100%!!!
Fix your code like this:
let y = document.querySelectorAll('.ex')
let i;
function removeSamples() {
for (i = 0; i < y.length; i++) {
y[i].style.display = 'none';
y[i].style.opacity = 0;
}
}
function showSamples() {
for (i = 0; i < y.length; i++) {
y[i].style.display = 'block';
y[i].style.opacity = 1;
}
}
Here, I'll do a brief explanation about the code above and a brief explanation about for in JavaScript.
First you make a multiple containers with the same class
<div class="ex">
</div>
<div class="ex">
</div>
<div class="ex">
</div>
<div class="ex">
</div>
Then, put something in that container to see what is happening
<div class="ex">
<p>
Text1
</p>
</div>
<div class="ex">
<p>
Text2
</p>
</div>
<div class="ex">
<p>
Text3
</p>
</div>
<div class="ex">
<p>
Text4
</p>
</div>
Now add some CSS
body {
background-color: rgb(25,25,25);
}
p {
color: rgb(200,200,0);
background-color: rgb(150,50,50);
font-size: 20px;
}
<div class="ex">
<p>
Text1
</p>
</div>
<div class="ex">
<p>
Text2
</p>
</div>
<div class="ex">
<p>
Text3
</p>
</div>
<div class="ex">
<p>
Text4
</p>
</div>
Now let's insert some basic Js (JavaScript) code We will declare x variable to be document.getElementsByClassName('ex') it'll help us to write x.style.display instead of document.getElementsByClassName('ex').style.display because we will be calling it multiple times. We will leave i variable undefined for now.
var x = document.getElementsByClassName('ex'); //To use it as a refrence
var i;
body {
background-color: rgb(25,25,25);
}
p {
color: rgb(200,200,0);
background-color: rgb(150,50,50);
font-size: 20px;
}
<div class="ex">
<p>
Text1
</p>
</div>
<div class="ex">
<p>
Text2
</p>
</div>
<div class="ex">
<p>
Text3
</p>
</div>
<div class="ex">
<p>
Text4
</p>
</div>
Let's make a button in the HTML then make empty function in JavaScript called removeEx()
var x = document.getElementsByClassName('ex'); //To use it as a refrence
var i;
function removeEx() {
}
body {
background-color: rgb(25,25,25);
}
p {
color: rgb(200,200,0);
background-color: rgb(150,50,50);
font-size: 20px;
}
<button type="button" onclick="removeEx()">
Remove Lines
</button>
<div class="ex">
<p>
Text1
</p>
</div>
<div class="ex">
<p>
Text2
</p>
</div>
<div class="ex">
<p>
Text3
</p>
</div>
<div class="ex">
<p>
Text4
</p>
</div>
Now, let's focus here on JavaScript.In the empty function we made, put empty for statement
function removeEx() {
for()
}
Now let's tell the for statement that i variable is equals to 0
function removeEx() {
for(i = 0;)
}
Then, we will tell for statement to stop looping once it reaches the last class element in the HTML by adding < smaller than symbol so it can know where to stop. Also, we have to tell it to stop corresponding to the length of the classes which is 4 classes we have in our HTML by attaching .length method to the variable x.instead of writing:
function removeEx() {
for(i = 0; i < document.getElementsByClassName('ex').length;)
}
We will write:
function removeEx() {
for(i = 0; i < x.length;) //Remember, var x = document.getElementsByClassName('ex');
}
We will make the i variable to keep increasing by 1 until it reaches 4 (the number of our classes) then it'll stop by adding ++ operator to the i variable.
So we will write this
function removeEx() {
for(i = 0; i < x.length; i++)
}
Our for statement is now good to go.Let's open a curly brackets
function removeEx() {
for(i = 0; i < x.length; i++) {
}
}
We will evoke an event to make all divs with the class ex to get removed. So we will let i variable attach to x variable to make the spark of the event by typing x[i], then we can put the event we want. For our case, the event is we want to change the display statement to none.We will write this
function removeEx() {
for (i = 0; i < x.length; i++) {
x[i].style.display = 'none'; //You can put any CSS statement after x[i].style for example x[i].style.color
}
}
Now let's test our code
var x = document.getElementsByClassName('ex');
var i;
function removeEx() {
for (i = 0; i < x.length; i++) {
x[i].style.display = 'none';
}
}
body {
background-color: rgb(25,25,25);
}
p {
color: rgb(200,200,0);
background-color: rgb(150,50,50);
font-size: 20px;
}
<button type="button" onclick="removeEx()">
Remove Lines
</button>
<div class="ex">
<p>
Text1
</p>
</div>
<div class="ex">
<p>
Text2
</p>
</div>
<div class="ex">
<p>
Text3
</p>
</div>
<div class="ex">
<p>
Text4
</p>
</div>
Finally, we will add 3 more buttons. One to get back our lines, one to make our lines semi-transparent, and one to make our lines not-transparent.The first button:
<button type="button" onclick="removeEx()">Remove Lines</button>
The second button:
<button type="button" onclick="removeEx2()">Get back Lines</button>
The third button:
<button type="button" onclick="removeEx3()">50% Lines</button>
The forth button:
<button type="button" onclick="removeEx4()">Normal Lines</button>
The final result:
var x = document.getElementsByClassName('ex'); //To use it as a refrence
var i;
function removeEx() {
for (i = 0; i < x.length; i++) {
x[i].style.display = 'none';
}
}
function removeEx2() {
for (i = 0; i < x.length; i++) {
x[i].style.display = 'block';
}
}
function removeEx3() {
for (i = 0; i < x.length; i++) {
x[i].style.opacity = '50%';
}
}
function removeEx4() {
for (i = 0; i < x.length; i++) {
x[i].style.opacity = '100%';
}
}
body {
background-color: rgb(25,25,25);
}
p {
color: rgb(200,200,0);
background-color: rgb(150,50,50);
font-size: 20px;
}
<button type="button" onclick="removeEx()">Remove Lines</button>
<button type="button" onclick="removeEx2()">Get back Lines</button>
<button type="button" onclick="removeEx3()">50% Lines</button>
<button type="button" onclick="removeEx4()">Normal Lines</button>
<div class="ex">
<p>
Text1
</p>
</div>
<div class="ex">
<p>
Text2
</p>
</div>
<div class="ex">
<p>
Text3
</p>
</div>
<div class="ex">
<p>
Text4
</p>
</div>
Related
Now I have issue that only first clicked button works when pressing others post buttons after first clicked button, it just disappears and not loading comments,
Adding snipped to clarify issue. It's first time using this feature. Sorry for issues, may you can help me with that.
I'm using django as backend.
var currentItems = 0;
function loadcomments(d) {
var post = d.getAttribute("data-post");
const elementList = document.querySelectorAll('#comment'+post);
for (let i = currentItems; i < currentItems + 2; i++) {
if (elementList[i]) {
elementList[i].style.display = 'block';
}
}
currentItems += 2;
if (currentItems >= elementList.length) {
event.target.style.display = 'none';
}
}
.comment {
display: none;
}
<div class='post'>
<div class='comment' id="comment1">
11
</div>
<div class='comment' id="comment1">
12
</div>
<div class='comment' id="comment1">
13
</div>
<div class='comment' id="comment1">
14
</div>
<div class='comment' id="comment1">
15
</div>
<a class="loadmore" href="javascript:void(0)"
onclick="loadcomments(this)" data-post="1">Load more</a>
</div>
<div class='post'>
<div class='comment' id="comment2">
21
</div>
<div class='comment' id="comment2">
22
</div>
<div class='comment' id="comment2">
23
</div>
<a class="loadmore" href="javascript:void(0)"
onclick="loadcomments(this)" data-post="2">Load more</a>
</div>
You need to set special currentItems variable for each posts.
remove the global currentItems variable and Try
function loadcomments(d) {
var post = d.getAttribute("data-post");
var currentItems = d.getAttribute("data-currentItems") | 0;
const elementList = document.querySelectorAll('#comment'+post);
for (let i = currentItems; i < currentItems + 2; i++) {
if (elementList[i]) {
elementList[i].style.display = 'block';
}
}
currentItems += 2;
d.setAttribute("data-currentItems", currentItems);
if (currentItems >= elementList.length) {
event.target.style.display = 'none';
}
}
As Teemu mentioned, "You've to declare and initialize currentItems outside of the function".
var currentItems = 0;
function loadcomments(d) {
var post = d.getAttribute("data-post");
const elementList = document.querySelectorAll('#comment'+post);
for (let i = currentItems; i < currentItems + 2; i++) {
if (elementList[i]) {
elementList[i].style.display = 'block';
}
}
currentItems += 2;
if (currentItems >= elementList.length) {
event.target.style.display = 'none';
}
}
div {
display: none;
}
<div id="comment1">
1
</div>
<div id="comment1">
2
</div>
<div id="comment1">
3
</div>
<div id="comment1">
4
</div>
<div id="comment1">
5
</div>
<a class="loadmore" href="javascript:void(0)" onclick="loadcomments(this)" data-post="1">Load more</a>
I'm trying to get this function to change the display to the "active" div on the first click then back to "Insurance" on the second click.
Currently, it doesn't change to "active" until the second click of the button, then it rotates back and forth as it should.
Why does it take 2 clicks initially? How do I get it to work with the first click of the button?
var timesClicked = 0;
function openDiv(evt, divName, divName2) {
if (name1 === 'Insurance' && timesClicked < 1) {
evt.currentTarget.className += " active";
}
var name1 = divName;
var name2 = divName2;
timesClicked++;
if (name1 !== 'Insurance' && timesClicked > 1) {
// timesClicked = 0;
// openDiv(evt, 'Insurance', 'Insurance2');
// console.log("switch back");
// return;
name1 = 'Insurance';
name2 = 'Insurance2';
evt.currentTarget.className.replace(" active", "");
timesClicked = 0;
}
var i, tabcontent, tabcontent2, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
tabcontent2 = document.getElementsByClassName("tabcontent2");
for (i = 0; i < tabcontent2.length; i++) {
tabcontent[i].style.display = "none";
tabcontent2[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(name1).style.display = "block";
document.getElementById(name2).style.display = "block";
if (timesClicked === 1) {
evt.currentTarget.className += " active";
}
}
document.getElementById("defaultOpen").click();
<button class="tablinks" onclick="openDiv(event, 'Insurance', 'Insurance2')" id="defaultOpen"></button>
<div class="dw12">
<button class="tablinks" onclick="openDiv(event, 'Retiree-Medical', 'Retiree-Medical2')"><div class="tab---icon"><img class="tab-img" src="images/retiree-medical_icon.png" alt="Retiree Medical"/></div><div class="shadow-div"></div><p class="bold-title"><strong>RETIREE MEDICAL</strong></p><p class="small-title">CLICK FOR MORE</p></button>
</div>
Your approach is quiet cumbersome for what I think it supposed to do. In fact if your only objective is to toggle visibility of elements with only 2 possible states: on or off, than you can do this without any javascript, by utilizing a hidden checkbox and based on it's state display or hide certain siblings via CSS:
#tab1:checked ~ #Retiree-Medical,
#tab1:checked ~ #Retiree-Medical2,
#tab1:not(:checked) ~ #Insurance,
/*note, you can't use #Insurance2 directly because it's not sibling of #tab1*/
#tab1:not(:checked) ~ .some-child #Insurance2,
/*or you can use * to make it more universal */
#tab1:not(:checked) ~ * .tab1toggle.checkedonly,
#tab1:checked ~ * .tab1toggle:not(.checkedonly) {
display: none;
}
label {
user-select: none;
/* prevent text selection on double click */
}
label>button {
pointer-events: none;
}
.div {
display: block;
}
.red {
background-color: pink;
display: inline-block;
}
<div class="content">
<!-- must be above any elements it controls -->
<input id="tab1" type="checkbox" checked hidden>
<!-- using label to redirect clicks to the checkbox -->
<label class="dw12 div" for="tab1">
<!-- to prevent this button from capturing clicks we must disable it in css via pointer-events style -->
<button class="tablinks"><div class="tab---icon"><img class="tab-img" src="images/retiree-medical_icon.png" alt="Retiree Medical"/></div><div class="shadow-div"></div><p class="bold-title"><strong>RETIREE MEDICAL</strong></p><p class="small-title">CLICK FOR MORE</p></button>
</label>
<div id="Insurance">Insurance</div>
<div class="some-child">
<div class="another-child">
<div id="Insurance2">Insurance2</div>
</div>
</div>
<div id="Retiree-Medical">Retiree-Medical</div>
<div id="Retiree-Medical2">Retiree-Medical2</div>
<div class="red">
<div class="tab1toggle checkedonly">generic div1 checked</div>
<div class="tab1toggle checkedonly">generic div2 checked</div>
<div class="tab1toggle checkedonly">generic div3 checked</div>
<div>
<div>
<div>
<div class="tab1toggle checkedonly">generic div4 checked, has multiple parents</div>
</div>
</div>
</div>
<div class="tab1toggle checkedonly">generic div5 checked</div>
<div class="tab1toggle">generic div6</div>
<div class="tab1toggle">generic div7</div>
<div class="tab1toggle">generic div8</div>
<div class="tab1toggle">generic div9</div>
<div class="tab1toggle">generic div10</div>
</div>
</div>
I have a piece of code that adds an event listener to a number of buttons, when the user clicks a button a class is applied to the button container. How can I restrict this so the user can only select a maximum of three buttons. The code below is working to a point, when you get to three you cannot deselect. Can anyone help me achieve
var blocks = document.querySelectorAll(".block");
var btn = document.querySelectorAll("button");
var total = 0;
for (let i = 0; i < btn.length; i++) {
btn[i].addEventListener("click", function() {
if (total < 3 && blocks[i].classList.contains("active")) {
blocks[i].classList.remove("active");
total--;
} else if (total < 3 && !blocks[i].classList.contains("active")) {
blocks[i].classList.add("active");
total++;
}
});
}
.container{
display:flex;
}
.block{
padding: 50px;
border:1px solid;
max-width:
}
.block.active{
background:grey;
}
<div class="container">
<div class="block">
<button>click</button>
</div>
<div class="block">
<button>click</button>
</div>
<div class="block">
<button>click</button>
</div>
<div class="block">
<button>click</button>
</div>
</div>
this.
You simply need to remove this condition total < 3 && from your first if. The number of selected items is irrelevant if the element is already selected. You just want to de-select it.
var blocks = document.querySelectorAll(".block");
var btn = document.querySelectorAll("button");
var total = 0;
for (let i = 0; i < btn.length; i++) {
btn[i].addEventListener("click", function() {
if (blocks[i].classList.contains("active")) {
blocks[i].classList.remove("active");
total--;
} else if (total < 3 && !blocks[i].classList.contains("active")) {
blocks[i].classList.add("active");
total++;
}
});
}
.container{
display:flex;
}
.block{
padding: 50px;
border:1px solid;
max-width:
}
.block.active{
background:grey;
}
<div class="container">
<div class="block">
<button>click</button>
</div>
<div class="block">
<button>click</button>
</div>
<div class="block">
<button>click</button>
</div>
<div class="block">
<button>click</button>
</div>
</div>
I'm trying to create a function that hides a class of divs then shows one of those divs by it's id. Here is what I have but I'm not sure if this is the right way to do it. If there is a better way I'm open to it, or if someone can identify an error in this code. What I would like is for the page to load with none of the bio classes visible, then when an image is clicked the bio with the corresponding id appears in its place. Searching only gave me this answer which did not help me. The code below has the bio class divs invisible when the page loads, the image can be clicked but the div does not appear on click. Hopefully this all makes sense.
.bio {
display: none;
}
#id1 {
display: none;
}
#id2 {
display: none;
}
<script language="JavaScript">
function setVisibility(name, id) {
document.getElementByClassName(name).style.display = "none";
document.getElementById(id).style.display = "inline";
}
</script>
<input type="image" src="name1_staff.jpg" onclick="setVisibility('bio', 'id1');" ;>
<input type="image" src="name2_staff.jpg" onclick="setVisibility('bio', 'id2');" ;>
<div class="bio" id="id1">
<h3>text</h3>
<p>more</p>
</div>
<div class="bio" id="id2">
<h3>text</h3>
<p>more</p>
It's wrong way I think. Let's do so:
function removeHidden(className)
{
var classes = className.split(' ');
var newClasses = [];
while (classes.length > 0) {
var name = classes.shift();
if (name != 'hidden' && newClasses.indexOf(name) < 0) {
newClasses.push(name);
}
}
return newClasses.join(' ');
}
function addHidden(className)
{
return removeHidden(className) + ' hidden';
}
function setVisibility(name, id)
{
var x = document.getElementsByClassName(name);
var i;
for (i = 0; i < x.length; i++) {
if (x[i].id == id) {
x[i].className = removeHidden(x[i].className);
} else {
x[i].className = addHidden(x[i].className);
}
}
}
setVisibility('bio', 'id1');
.bio {
/* don't put here display: none */
/* you can delete it if you have no other styles */
}
.hidden {
display: none;
}
<input type="image" src="http://www.hanselman.com/blog/content/binary/WindowsLiveWriter/Hans.NETMVCJeffAtwoodandhistechnicalteam_1349C/stackoverflow-logo-250_3.png" onclick="setVisibility('bio', 'id1');" ;>
<input type="image" src="http://www.hanselman.com/blog/content/binary/WindowsLiveWriter/Hans.NETMVCJeffAtwoodandhistechnicalteam_1349C/stackoverflow-logo-250_3.png" onclick="setVisibility('bio', 'id2');" ;>
<div class="bio" id="id1">
<h3>FIRST DESCRIPTION</h3>
<p>description description description description description</p>
</div>
<div class="bio" id="id2">
<h3>SECOND DESCRIPTION</h3>
<p>description description description description description</p>
</div>
Try this
<script type="text/javascript">
function setVisibility(name, id) {
var x = document.getElementsByClassName(name);
var i;
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(id).style.display = "inline";
}
</script>
<input type="image" src="name1_staff.jpg" onclick="setVisibility('bio', 'id1');">
<input type="image" src="name2_staff.jpg" onclick="setVisibility('bio', 'id2');">
<div class="bio" id="id1">
<h3>text</h3>
<p>more</p>
</div>
<div class="bio" id="id2">
<h3>text</h3>
<p>more</p>
</div>
Try using the visibility property. In this case, you won't have to deal with your .bio container. You can simply focus on showing and hiding your content. See here.
Keep in mind: With your solution you're setting your containers are always visible. You may also attach a visible property to your container to not get a blank space (if you trigger your 2nd button first).
I have some scripts here that show and hide divs when click. Now what I need is to just only display one div at a time. I have a code that controls them all but its not working I don't know about much of javascript.
This is the first example of show/hide function that can be done simultaneously without hiding the other divs.
FIDDLE HERE
HTML:
<a href="javascript:ReverseDisplay('uniquename')">
Click to show/hide.
</a>
<div id="uniquename" style="display:none;">
<p>Content goes here.</p>
</div>
<a href="javascript:ReverseDisplay('uniquename1')">
Click to show/hide.
</a>
<div id="uniquename1" style="display:none;">
<p>Content goes here.</p>
</div>
SCRIPT:
function HideContent(d) {
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
document.getElementById(d).style.display = "block";
}
function ReverseDisplay(d) {
if (document.getElementById(d).style.display == "none") {
document.getElementById(d).style.display = "block";
} else {
document.getElementById(d).style.display = "none";
}
}
function HideAllShowOne(d) {
// Between the quotation marks, list the id values of each div.
var IDvaluesOfEachDiv = "idone idtwo uniquename1 uniquename";
//-------------------------------------------------------------
IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/[,\s"']/g," ");
IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/^\s*/,"");
IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/\s*$/,"");
IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/ +/g," ");
var IDlist = IDvaluesOfEachDiv.split(" ");
for(var i=0; i<IDlist.length; i++) { HideContent(IDlist[i]); }
ShowContent(d);
}
The other fiddle I created would do what I need but the script seems not to be working. Fiddle here
Found the solution on my code thanks to #Abhas Tandon
Fiddle here the extra id's inside the IDvaluesOfEachDiv seems to be making some error with the codes.
If you are happy with IE10+ support then
function ReverseDisplay(d) {
var els = document.querySelectorAll('.toggle.active:not(#' + d + ')');
for (var i = 0; i < els.length; i++) {
els[i].classList.remove('active');
}
document.getElementById(d).classList.toggle('active')
}
.toggle {
display: none;
}
.toggle.active {
display: block;
}
<a href="javascript:ReverseDisplay('uniquename')">
Click to show/hide.
</a>
<div id="uniquename" class="toggle">
<p>Content goes here.</p>
</div>
<a href="javascript:ReverseDisplay('uniquename1')">
Click to show/hide.
</a>
<div id="uniquename1" class="toggle">
<p>Content goes here.</p>
</div>
I would suggest to use jQuery which is far easier.
Include thiswithin
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
HTML
<div id="id_one">Item 1</div>
<div id="content_one">
content goes here
</div>
<div id="id_two">Item 1</div>
<div id="content_two">
content goes here
</div>
Script:
$(function()
{
$("#content_one").hide();
$("#content_two").hide();
});
$("#id_one").on("click",function()
{
$("#content_one").slideDown("fast");
});
$("#id_two").on("click",function()
{
$("#content_two").slideDown("fast");
});
If you have a "Button" for every DIV inside your HTML - you can go by element index
var btn = document.querySelectorAll(".btn");
var div = document.querySelectorAll(".ele");
function toggleDivs() {
for(var i=0; i<btn.length; i++) {
var us = i===[].slice.call(btn).indexOf(this);
btn[i].tog = us ? this.tog^=1 : 0;
div[i].style.display = ["none","block"][us?[this.tog]:0];
}
}
for(var i=0; i<btn.length; i++) btn[i].addEventListener("click", toggleDivs);
.btn{/* Anchors Buttons */ display:block; cursor:pointer; color:#00f;}
.ele{/* Hidden Divs */ display:none;}
<a class="btn"> 1Click to show/hide.</a>
<div class="ele"><p>1Content goes here.</p></div>
<hr>
<a class="btn">2Click to show/hide.</a>
<div class="ele"><p>2Content goes here.</p></div>
<hr>