Expanding and collapsing a div using jQuery when an image is clicked

Question

Expanding and collapsing a div using jQuery when an image is clicked

I have a query that spans across two areas - CSS styling and JQuery functionality.

The primary concern I have is related to my code snippet below. When the user clicks on the circular profile image, ideally, the "profiledrop" div should become visible. Surprisingly, if I replace the link tag with plain text, everything functions perfectly fine. However, when an image is used instead of text as the link, the code fails to work as expected.
A secondary issue revolves around the size of the "notification-tab" div. It seems to be exceptionally large, almost stretching to approximately 100px for each div, which is excessive! My goal is to reduce this size by at least half. Which section of the CSS code should I tweak to achieve this adjustment?

After spending the last 10 hours typing out this code, I'm feeling completely drained at this point. While I understand that both solutions might be straightforward, I seem to be overlooking the resolution. Thank you in advance for your guidance!

Explore the Codepen here: https://codepen.io/dansbyt/pen/xxgayPa?editors=1010

HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://mrdansby.com/private/style.css">

// HTML structure content

CSS:

// CSS styling details

JQUERY:

// JQuery functionalities

javascript jquery css

Answer 1

Answer №1

'deploy' should be included in the img tag, like so:

<div class="avatar">
    <a href="#">
        <img id='deploy' src='https://mrdansby.com/resources/pics/1.png'>
    </a>
</div>

Answer 2

'deploy' should be included in the img tag, like so:

<div class="avatar">
    <a href="#">
        <img id='deploy' src='https://mrdansby.com/resources/pics/1.png'>
    </a>
</div>

Answer 3

Answer №2

Let's tackle your second question first. The reason behind the notification tab appearing large is due to the fixed width set in the .profiledrop class, which is 300px. Since each notification group inherits this width, they also become 300px. Furthermore, the width of each notification tab is set as 100%, causing it to expand to the nearest parent element, which is the notification group - hence resulting in a width of 300px.

To address this issue, you can either modify the width to be not 100% for the notification tab or adjust the width of the profiledrop class to something other than 300px. However, the choice between these solutions depends on the desired look and feel you are aiming for.

For your initial query, a straightforward approach would be to utilize display: none. Below, I have provided a code snippet that demonstrates how to achieve this effect. Feel free to test it out and let me know if this aligns with what you have in mind.

const image = document.querySelector("#myimage");
const paragraph = document.querySelector("p");

// Event listener added to the image waiting for click event
image.addEventListener("click", function() {
  if (paragraph.style.display === 'none') {
    // If paragraph currently hidden, show it
    paragraph.style.display = 'block';
  } else {
    // If paragraph currently shown, hide it
    paragraph.style.display = 'none';
  }
})

<img id="myimage" src="https://via.placeholder.com/350x150">
<p>Click on the image. Click on the image. Click on the image...</p>

Answer 4

Let's tackle your second question first. The reason behind the notification tab appearing large is due to the fixed width set in the .profiledrop class, which is 300px. Since each notification group inherits this width, they also become 300px. Furthermore, the width of each notification tab is set as 100%, causing it to expand to the nearest parent element, which is the notification group - hence resulting in a width of 300px.

To address this issue, you can either modify the width to be not 100% for the notification tab or adjust the width of the profiledrop class to something other than 300px. However, the choice between these solutions depends on the desired look and feel you are aiming for.

For your initial query, a straightforward approach would be to utilize display: none. Below, I have provided a code snippet that demonstrates how to achieve this effect. Feel free to test it out and let me know if this aligns with what you have in mind.

const image = document.querySelector("#myimage");
const paragraph = document.querySelector("p");

// Event listener added to the image waiting for click event
image.addEventListener("click", function() {
  if (paragraph.style.display === 'none') {
    // If paragraph currently hidden, show it
    paragraph.style.display = 'block';
  } else {
    // If paragraph currently shown, hide it
    paragraph.style.display = 'none';
  }
})

<img id="myimage" src="https://via.placeholder.com/350x150">
<p>Click on the image. Click on the image. Click on the image...</p>

Expanding and collapsing a div using jQuery when an image is clicked

Answer №1

Answer №2

Similar questions

Incorporate a style sheet for a colorful navigation bar

Tips on loading a CSV file into memory synchronously prior to processing HTTP requests

Creating impenetrable div elements with JavaScript or jQuery

Issue encountered while authenticating(sign in) password using passport-local module in node.js

Adding markers to a Leaflet map using coordinates retrieved from a Supabase database - a step-by-step guide

Issue with $ .bind method in the module pattern

establish connections within dynamic data table entries

The fixed position div remains stationary as the page scrolls

Encountering an issue while using Vue CLI where the console displays an error message: "Uncaught

Using specific sections of JSON data to display in an alert message (Vanilla JavaScript)

Generating HTML content using Node.js

Problem encountered with the submission feature in Zend Framework

No visible changes from the CSS code

When the JSON object is transferred to the node server, it undergoes modifications

What is the precise output of getFloatTimeDomainData function?

What is the most efficient way to retrieve a substantial volume of data from Mongodb quickly, especially when the query results require processing before transmitting to the client?

Analyzing user input in PHP against a mysqli database

What is the best way to replace "NaN" with a blank space within an array?

Is it necessary for Angular Reactive Form Validator to convert types before checking the value for min/max validation?

Encountering an Uncaught Error: MyModule type lacks the 'ɵmod' property