Ways to display a different div when clicking on a div?

Question

Ways to display a different div when clicking on a div?

Good afternoon,

I've noticed that this question has been asked numerous times before, but none of the solutions provided seem to work for my specific issue.

My problem involves a div with the class .title3. I want another div with the class .Content3 to be displayed when the user clicks on it. However, it's not functioning as intended.

Below is a snippet of my HTML code where I encountered this problem:

<body style="background-color:#171717">

<div class="pseudo3">
     <div class="one3">
          <div class="Content3">
              <p class="close">X</p>
              <form action="order.php">
                <input type="text" value="First & Last Name">
                <input type="email" value="Your e-mail">
                <input type="text" value="Your phone number">
                <textarea>Write your feedback here</textarea>
                <button>Send</button>
              </form>
           </div>
           <div onmouseclick="showDiv()" class="title3">
                FEEDBACK
           </div>
      </div>
</div>


<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
  function showDiv() {
    var x = document.getElementsByClassName("title3");
      if (x.click === true) {
        document.getElementsByClassName("Content3").style.display = "block";
      }
  }
    </script>
</body>

CSS:

/* The Form Style */

form {
    width: 100%;
    height: 100%;
}

form input {
    width: 100%;
    height: 35px;
    color: #8b8b8b;
    font-family: 'Lato', sans-serif;
    background-color: #171717;
    padding: 12px;
    border: 0;
    outline: none;
    border-top: 0.15px solid #262323;
    border-left: 0.15px solid #262323;
    border-right: 0.15px solid #262323;
}

form textarea {
    min-width: 100%;
    max-width: 100%;
    min-height: 200px;
    max-height: 200px;
    color: #8b8b8b;
    font-family: 'Lato', sans-serif;
    background-color: #171717;
    padding: 12px;
    border: 0;
    outline: none;
    border-top: 0.15px solid #262323;
    border-left: 0.15px solid #262323;
    border-right: 0.15px solid #262323;
}

form button {
    width: 100%;
    height: 45px;
    position: relative;
    top: -3px;
    color: #8b8b8b;
    font-family: 'Lato', sans-serif;
    background-color: #171717;
    border: 0.15px solid #262323;
    outline: none;
    font-size: 20px;
}
input:focus,
textarea:focus,
button:focus{
    background-color: #212020;
    border-top: 0.15px solid #1f1616;
    border-left: 0.15px solid #1f1616;
    border-right: 0.15px solid #1f1616;
}

/* Content3 style */

.Content3 {
    width: 300px;
    height: 350px;
    position: absolute;
    z-index: 2;
    display:none;
}

/* one3 style */

.one3 {
    width: 300px;
    height: 350px;
    transition: 0.3s ease;
    position: relative;
    background-color: #141414;
}

/* pseudo3 style */

.pseudo3 {
    width: 320px;
    padding: 10px;
    border-top: 2px solid #b95e1c;
    border-bottom: 2px solid #ad7145;
    background-image:
        linear-gradient(#b95e1c, #ad7145),
        linear-gradient(#b95e1c, #ad7145);
    background-size: 2px 100%;
    background-position: 0 0, 100% 0;
    background-repeat: no-repeat;
}

/* title3 style */

.one3 .title3 {
    padding: 30px;
    font-size: 24px;
    color: #8b8b8b;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;

}

/* close style */

.close{
    color: #8b8b8b;
    font-size: 24px;
    position:absolute;
    left:-11px;
    top:-62px;
    z-index:3;
     border-top: 0.5px solid #1f1616;
    border-left: 0.5px solid #1f1616;
    border-right: 0.5px solid #1f1616;
    border-bottom: 0.5px solid #1f1616;
    padding:10px 17px;
    background-color:#212121;
    transition: 0.2s ease-in-out;
}
.close:hover{
    background-color: #8b8b8b;
    color:#212121;
    cursor:pointer;
    transition: 0.2s ease-in-out;
}

JavaScript:


function showDiv() {
  var x = document.getElementsByClassName("title3");
      if ( x.click === true ){
        document.getElementsByClassName("Content3").style.display = "block";
      }
}

Although there are no error messages, clicking on the .title3 div doesn't display the div with the class .Content3.

javascript jquery html css

Answer 1

Answer №1

There are several issues in your code that need addressing

You are using onmouseclick, which is invalid in Javascript. Use onclick instead.
You are attempting to assign the HTML element with class title3 to variable x. Here are a couple of problems:

2.1. You do not need to assign the clicked element to a variable within the function as you can access it directly with event.target

2.2. By using getElementsByClassName, you're getting an HTML Collection, not a single element. It's better to use querySelector or add an id and use getElementById. However, utilizing event.target upon click is sufficient.
if ( x.click === true ){ This check for element clicked status is redundant within a function triggered only by clicking on the element.
Refer to point 2.2 regarding addressing elements correctly.
Avoid naming HTML attributes with capital letters. Use content3 instead.
Avoid importing jQuery if unnecessary in your project.

View the corrected code below

function showDiv() {
  document.querySelector(".Content3").style.display = "block";
}

.Content3 {
  display:none
  }

<div class="pseudo3">
  <div class="one3">
    <div class="Content3">
      <p class="close">X</p>
      <form action="order.php">
        <input type="text" value="First & Last Name">
        <input type="email" value="Your e-mail">
        <input type="text" value="Your phone number">
        <textarea>Write your feedback here</textarea>
        <button>Send</button>
      </form>
    </div>
    <div onclick="showDiv()" class="title3">
      FEEDBACK
    </div>
  </div>
</div>

Helpful links:

Answer 2

There are several issues in your code that need addressing

You are using onmouseclick, which is invalid in Javascript. Use onclick instead.
You are attempting to assign the HTML element with class title3 to variable x. Here are a couple of problems:

2.1. You do not need to assign the clicked element to a variable within the function as you can access it directly with event.target

2.2. By using getElementsByClassName, you're getting an HTML Collection, not a single element. It's better to use querySelector or add an id and use getElementById. However, utilizing event.target upon click is sufficient.
if ( x.click === true ){ This check for element clicked status is redundant within a function triggered only by clicking on the element.
Refer to point 2.2 regarding addressing elements correctly.
Avoid naming HTML attributes with capital letters. Use content3 instead.
Avoid importing jQuery if unnecessary in your project.

View the corrected code below

function showDiv() {
  document.querySelector(".Content3").style.display = "block";
}

.Content3 {
  display:none
  }

<div class="pseudo3">
  <div class="one3">
    <div class="Content3">
      <p class="close">X</p>
      <form action="order.php">
        <input type="text" value="First & Last Name">
        <input type="email" value="Your e-mail">
        <input type="text" value="Your phone number">
        <textarea>Write your feedback here</textarea>
        <button>Send</button>
      </form>
    </div>
    <div onclick="showDiv()" class="title3">
      FEEDBACK
    </div>
  </div>
</div>

Helpful links:

Answer 3

Answer №2

There's no need for jQuery in this scenario. Simply remove the onmouseover attribute and replace it with the following code snippet:

<script>
// Add a click listener to the .title3 element
document.getElementsByClassName("title3")[0].addEventListener('click', function(e){
   // Prevent the default action (not necessary here, but good practice)
   e.preventDefault(); 
   // Change the style to display the .Content3 element
   document.getElementsByClassName("Content3")[0].style.display = "block";
});
</script>

Answer 4

There's no need for jQuery in this scenario. Simply remove the onmouseover attribute and replace it with the following code snippet:

<script>
// Add a click listener to the .title3 element
document.getElementsByClassName("title3")[0].addEventListener('click', function(e){
   // Prevent the default action (not necessary here, but good practice)
   e.preventDefault(); 
   // Change the style to display the .Content3 element
   document.getElementsByClassName("Content3")[0].style.display = "block";
});
</script>

Answer 5

Answer №3

Is it possible to utilize the data property in relation to this particular subject?

<div class="titles">
    <button data-id="1">open 1</button>
    <button data-id="2">open 2</button>
    <button data-id="3">open 3</button>
</div>
<div class="contents">
    <p data-id="1">context</p>
    <p data-id="2">context</p>
    <p data-id="3">context</p>
</div>

Upon clicking any button, retrieve the data-id and perform actions within the contents div based on the respective data-id. If you are having trouble grasping the concept, I can provide an example for clarification.

Answer 6

Is it possible to utilize the data property in relation to this particular subject?

<div class="titles">
    <button data-id="1">open 1</button>
    <button data-id="2">open 2</button>
    <button data-id="3">open 3</button>
</div>
<div class="contents">
    <p data-id="1">context</p>
    <p data-id="2">context</p>
    <p data-id="3">context</p>
</div>

Upon clicking any button, retrieve the data-id and perform actions within the contents div based on the respective data-id. If you are having trouble grasping the concept, I can provide an example for clarification.

Ways to display a different div when clicking on a div?

Answer №1

Answer №2

Answer №3

Similar questions

Display the element only when the request sent with getJSON exceeds a certain threshold of time in milliseconds

Incorporate CSS animations prior to removing an element from an array

New and personalized bindings in knockout.js for dynamically updating a dropdown menu based on the selection in another dropdown menu

What methods are available to create distinctive, shareable links akin to those utilized by Zoom and Google Hangouts?

Manipulating the DOM within an Angular application

arranging data in html table columns using angular 2

What causes CSS animations to suddenly halt?

Set up two separate tables with sufficient space in between each other

Guide on utilizing personalized fonts with Handlebars and Puppeteer

The loading animation does not appear in the NextJS 14 - loading.tsx component while a GET request is being processed

What is the best way to extract the .text(data) value and use it within a conditional statement?

Manipulating an SVG file with JavaScript

Updating row values in an Angular table

Ways to verify the status within the DataTable?

Angular's route resolve feature does not wait for the promise to resolve before

Activate function when list item is clicked

What is the correct way to handle fetch timeouts in a React component?

Django redirects to an alternative template instead of the default one

Apply the style when the page loads and remove it when clicked

Tips for adding data to an array while iterating through an object: