CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Timothy
Timothy

Reputation: 139

Hiding /Showing Div

I want the (".aboutPage") to show and hide when (".about") is clicked. On start the div is showing. How do I incorporate the hide() with this as it is not hidden once the page loads. Please help. I am aware that the div has not been sized or anything, I'll do that after I get all three working.

.aboutPage {
  height: 50px;
  width: 50px;
  background-color: red;
}
<div class="container">
  <h1 class="title">Name Goes Here</h1>
  <br>
  <div class="menu">
    <h1 class="about">About Me</h1>
    <h1 class="projects">Projects</h1>
    <h1>Contact Me</h1>
  </div>
  <div class="aboutPage"> Here it Is</div>
</div>

Upvotes: 1

Views: 40

Answers (3)

Scott Marcus
Scott Marcus

Reputation: 65808

You certainly "can" use JQuery to do this, but it is not necessary.

See comments inline for explanation (Note: I've changed the last 3 h1 elements to p elements just so they will fit into the code snippet window here.):

// Get references to DOM objects needed to work the problem:
var a = document.querySelector(".about");
var ap = document.querySelector(".aboutPage");

// Add a "click" event handler to the .about element
a.addEventListener("click", function(){
  
  // If .aboutPage is hidden, show it - otherwise hide it.
  // Do this by adding or removing the .hide class.
  if(ap.classList.contains("hide")){
     ap.classList.remove("hide");  
  } else {
    ap.classList.add("hide");
  }
});
.aboutPage{
    height: 50px;
    width: 50px;
    background-color: red;
}

.hide { display:none; }
<div class="container">
        <h1 class="title">Name Goes Here</h1>
        <div class="menu">
          <p class="about">About Me</p>
          <p class="projects">Projects</p>
          <p>Contact Me</p>
        </div>
        <div class="aboutPage hide"> Here it Is</div>
</div>

Upvotes: 1

Michael Coker
Michael Coker

Reputation: 53664

You can use jQuery to toggle a class that hides the element.

$('.about').on('click',function() {
  $('.aboutPage').toggleClass('hide');
})
.hide {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <h1 class="title">Name Goes Here</h1>
  <br>
  <div class="menu">
    <h1 class="about">About Me</h1>
    <h1 class="projects">Projects</h1>
    <h1>Contact Me</h1>
  </div>
  <div class="aboutPage"> Here it Is</div>
</div>

And here's how you would do it in vanilla JS

document.getElementsByClassName('about')[0].addEventListener('click',function() {
  document.getElementsByClassName('aboutPage')[0].classList.toggle('hide');
})
.hide {
  display: none;
}
<div class="container">
  <h1 class="title">Name Goes Here</h1>
  <br>
  <div class="menu">
    <h1 class="about">About Me</h1>
    <h1 class="projects">Projects</h1>
    <h1>Contact Me</h1>
  </div>
  <div class="aboutPage"> Here it Is</div>
</div>

Upvotes: 1

Mihai Alexandru-Ionut
Mihai Alexandru-Ionut

Reputation: 48337

You have to use toggle method in order to display or hide the matched elements.

Also, you need to bind a click event handler to .about element.

To hide div when page loads: $('.aboutPage').hide();

or using css:

.aboutPage{
    display:none;
}


$('.aboutPage').hide();
$('.about').click(function(){
  $('.aboutPage').toggle();
});
.aboutPage{
    height: 50px;
    width: 50px;
    background-color: red;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
      <div class="container">
        <h1 class="title">Name Goes Here</h1>
        <br>
        <div class="menu">
          <h1 class="about">About Me</h1>
          <h1 class="projects">Projects</h1>
          <h1>Contact Me</h1>
        </div>
        <div class="aboutPage"> Here it Is</div>
      </div>
    </body>

Upvotes: 3

Related Questions