Create Hidden Card Using HTML And CSS

Identity Card

Denim Jeans

Mr. Someone's Name

Manager of any organization

Some text about the someone's name. Super slim and comfy lorem ipsum lorem jeansum. Lorem jeamsun denim lorem jeansum.

Identity Card

Denim Jeans

Mr. Someone's Name

Manager of any organization

Some text about the someone's name. Super slim and comfy lorem ipsum lorem jeansum. Lorem jeamsun denim lorem jeansum.

Identity Card

Denim Jeans

Mr. Someone's Name

Manager of any organization

Some text about the someone's name. Super slim and comfy lorem ipsum lorem jeansum. Lorem jeamsun denim lorem jeansum.

Identity Card

Denim Jeans

Mr. Someone's Name

Manager of any organization

Some text about the someone's name. Super slim and comfy lorem ipsum lorem jeansum. Lorem jeamsun denim lorem jeansum.

Identity Card

Denim Jeans

Mr. Someone's Name

Manager of any organization

Some text about the someone's name. Super slim and comfy lorem ipsum lorem jeansum. Lorem jeamsun denim lorem jeansum.

Identity Card

Denim Jeans

Mr. Someone's Name

Manager of any organization

Some text about the someone's name. Super slim and comfy lorem ipsum lorem jeansum. Lorem jeamsun denim lorem jeansum.

Identity Card

Denim Jeans

Mr. Someone's Name

Manager of any organization

Some text about the someone's name. Super slim and comfy lorem ipsum lorem jeansum. Lorem jeamsun denim lorem jeansum.

Identity Card

Denim Jeans

Mr. Someone's Name

Manager of any organization

Some text about the someone's name. Super slim and comfy lorem ipsum lorem jeansum. Lorem jeamsun denim lorem jeansum.




Its features:

  • Many texts are hidden inside vertical menu buttons that are displayed vertically at the click of a button.

  • Here add a "plus" sign to each button. When the user clicks on the button, the "plus" sign is replaced

    with a "minus" sign.

  • It is a hoverable vertical menu.

  • You can change the hover color via CSS if you want.

Try to create like yourself by following the codes below :

Step 1) Add to folder : First make one folder and put some image that you like. Step 2) Add to head : <meta name="viewport" content="width=device-width, initial-scale=1">
Step 3) Add to html : <h2>Create Hidden Card With HTML And CSS</h2> <div class="nine"> <button class="accordion">Director General</button> <div class="panel"> <h2 style="text-align:center">Identity Card</h2> <div class="card"> <img src="k.jpg" alt="Denim Jeans" style="width:100%"> <h3>Mr. Someone's Name</h3> <p>Manager of any organization</p> <p>Some text about the someone's name. Super slim and comfy lorem ipsum lorem jeansum. Lorem jeamsun denim lorem jeansum.</p> <p><button>Learn More </button></p> </div> </div> <button class="accordion">Divisional Director</button> <div class="panel"> <h2 style="text-align:center">Identity Card</h2> <div class="card"> <img src="k.jpg" alt="Denim Jeans" style="width:100%"> <h3>Mr. Someone's Name</h3> <p>Manager of any organization</p> <p>Some text about the someone's name. Super slim and comfy lorem ipsum lorem jeansum. Lorem jeamsun denim lorem jeansum.</p> <p><button>Learn More </button></p> </div> </div> <button class="accordion">District Director</button> <div class="panel"> <h2 style="text-align:center">Identity Card</h2> <div class="card"> <img src="k.jpg" alt="Denim Jeans" style="width:100%"> <h3>Mr. Someone's Name</h3> <p>Manager of any organization</p> <p>Some text about the someone's name. Super slim and comfy lorem ipsum lorem jeansum. Lorem jeamsun denim lorem jeansum.</p> <p><button>Learn More </button></p> </div> </div> <button class="accordion">Upazila director</button> <div class="panel"> <h2 style="text-align:center">Identity Card</h2> <div class="card"> <img src="k.jpg" alt="Denim Jeans" style="width:100%"> <h3>Mr. Someone's Name</h3> <p>Manager of any organization</p> <p>Some text about the someone's name. Super slim and comfy lorem ipsum lorem jeansum. Lorem jeamsun denim lorem jeansum.</p> <p><button>Learn More </button></p> </div> </div> <button class="accordion">Police Station Director</button> <div class="panel"> <h2 style="text-align:center">Identity Card</h2> <div class="card"> <img src="k.jpg" alt="Denim Jeans" style="width:100%"> <h3>Mr. Someone's Name</h3> <p>Manager of any organization</p> <p>Some text about the someone's name. Super slim and comfy lorem ipsum lorem jeansum. Lorem jeamsun denim lorem jeansum.</p> <p><button>Learn More </button></p> </div> </div> <button class="accordion">Union Director</button> <div class="panel"> <h2 style="text-align:center">Identity Card</h2> <div class="card"> <img src="k.jpg" alt="Denim Jeans" style="width:100%"> <h3>Mr. Someone's Name</h3> <p>Manager of any organization</p> <p>Some text about the someone's name. Super slim and comfy lorem ipsum lorem jeansum. Lorem jeamsun denim lorem jeansum.</p> <p><button>Learn More </button></p> </div> </div> <button class="accordion">Field Director</button> <div class="panel"> <h2 style="text-align:center">Identity Card</h2> <div class="card"> <img src="k.jpg" alt="Denim Jeans" style="width:100%"> <h3>Mr. Someone's Name</h3> <p>Manager of any organization</p> <p>Some text about the someone's name. Super slim and comfy lorem ipsum lorem jeansum. Lorem jeamsun denim lorem jeansum.</p> <p><button>Learn More </button></p> </div> </div> <button class="accordion">Field workers</button> <div class="panel"> <h2 style="text-align:center">Identity Card</h2> <div class="card"> <img src="k.jpg" alt="Denim Jeans" style="width:100%"> <h3>Mr. Someone's Name</h3> <p>Manager of any organization</p> <p>Some text about the someone's name. Super slim and comfy lorem ipsum lorem jeansum. Lorem jeamsun denim lorem jeansum.</p> <p><button>Learn More </button></p> </div> </div> </div>
Step 4) Add to css : .nine{ max-width:300px; height:auto; border:10px dashed #999186; float:; } .accordion { background-color: #d9d9d7; color: black; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } .active09, .accordion:hover { background-color: #87c540; } .accordion:after { content: '\002B'; color: #777; font-weight: bold; float: right; margin-left: 5px; } .active09:after { content: "\2212"; } .panel { padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; } .card { max-width: 100%; margin: auto; text-align: center; font-family: arial; } .price { color: grey; font-size: 22px; } .card button { border: none; outline: 0; padding: 12px; color: white; background-color: #000; text-align: center; cursor: pointer; width: 100%; font-size: 18px; } .card button:hover { opacity: 0.7; }
Step 5) Add to script : <script> var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active09"); var panel = this.nextElementSibling; if (panel.style.maxHeight) { panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + "px"; } }); } </script>

Thank you sir

Congratulations to you on visiting our page.

If you have any feedback, you can give advice through the "Contact Me" form.