Question 44045 in Html Question posted in
Some basic documentation can be found here.

How to hide a div after click on another div – Html

I want to hide my div after click on a search icon, it isn’t a button so I don’t really know how to do it. I want to hide this text "

Simply click on the … and type the name of where you would like to visit

" by clicking on the div class="search-icon".

<div id="intro"> 
            <p>Simply click on the &nbsp;<i class="fas fa-search"></i>&nbsp; and type the name of where you would like
                to visit</p>
            <div class="search-box">
                <input id="searchBox" type="text" placeholder="Search your location">
                <div class="search-icon">
                    <i class="fas fa-search"></i>
                </div>
                <div class="cancel-icon">
                    <i class="fas fa-times"></i>
                </div>
                <div class="search-data"></div>
            </div>
        </div>

It looks like that

I’ve tried few js code but because it isn’t a button I am not sure hot it should work.

Tags:

5

Answers


  1. 0

    To do this you need to use the click event https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event

    the best way to do his is to add an id on your element you want clickable then here’s the code :

    document.getElementById('foo').addEventListener('click', function (event) {
  document.getElementById('bar').style.display = 'none'
});
    <div id="foo">Hide bar</div>
<div id="bar">Bar</div>
    Login or Signup to reply.
  2. 0

    Use Collapsible from Bootstrap for easy and Fast Solution

    Login or Signup to reply.
  3. 0

    There is a misunderstanding in your question.

    If you want to hide any element, you can select it by its ID or class name. Here, I used the class name. Since there are two elements with the same class name, I manually selected the first one.
    Here is the code:

    document.getElementsByClassName("fas fa-search")[0].hidden = true
    Login or Signup to reply.
  4. 0 
    document.querySelector('.search-icon').addEventListener('click', function (event) {
  document.getElementById('para').style.display = 'none'
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/js/all.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" rel="stylesheet"/>
<div id="intro"> 
            <p id="para">Simply click on the &nbsp;
 <i class="fas fa-search"></i>&nbsp; and type the name of where you would like
            to visit</p>
        <div class="search-box">
            <input id="searchBox" type="text" placeholder="Search your location">
            <div class="search-icon">
                <i class="fas fa-search"></i>
            </div>
            <div class="cancel-icon">
                <i class="fas fa-times"></i>
            </div>
            <div class="search-data"></div>
        </div>
    </div>
    Login or Signup to reply.
  5. 0

    First you need to give <p> and second search icon a clear classes, so you can select them in the dom:

    <div id="intro">
  <p class="text">Simply click on the &nbsp;<i class="fas fa-search"></i>&nbsp; and type the name of where you would like to visit</p>
  <div class="search-box">
    <input id="searchBox" type="text" placeholder="Search your location">
    <div class="search-icon">
      <i class="fas fa-search search-icon"></i>
    </div>
    <div class="cancel-icon">
      <i class="fas fa-times"></i>
    </div>
    <div class="search-data"></div>
  </div>
</div>

    then for the JS part first you need to select that paragraph and the second search icon:

    const searchIcon = document.querySelector(".search-icon");
const text = document.querySelector(".text");

searchIcon.addEventListener("click", function () {
  if (window.innerWidth <= 768) {
    text.classList.add("hide-text");
  }
});

    and for actually hiding the text you need to add a css class:

    .hide-text {
  display: none;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search