Display a single item using Jquery when clicking on an element with the same class

I'm relatively new to JQuery/Javascript scripting and I'm having some difficulty. How can I display one item with the same class without affecting the other items?

Here is my code:

$(function() {
  $('.embedContainer > .myPosterImage').on('click', function() {
    $('.embedContainer > .myPosterImage').hide();
    $('.embedContainer > embed').show();
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="embedContainer">
  <img class="myPosterImage" src="img/websites/01_documentation.jpg" data-original="img/websites/full/01_full.jpg" />
  <embed src="img/websites/Concept.pdf" width="563.41" height="375.98></embed>
</div>

<div class="embedContainer">
  <img class="myPosterImage" src="img/websites/01_documentation.jpg" data-original="img/websites/full/01_full.jpg" />
  <embed src="img/websites/Concept.pdf" width="563.41" height="375.98></embed>

</div>

Thank you very much.

javascripthtmljquerycssscripting

Answer №1

If you want to collapse all elements and only expand the one that has been clicked, you can achieve this with the following code:

$('.embedContainer > .myPosterImage').hide();

However, it is important to note that the second line of code will actually show all elements:

$('.embedContainer > embed').show();

To target the specific element that was clicked, you can traverse the DOM by starting from the clicked element (using this within the click event handler). Find a common parent element using methods like closest(), and then locate the target element using find().

You can implement this as shown below:

$(this).closest('.embedContainer').find('embed').show();

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Dynamically sending data to child components in Vue.js

I'm currently working on a progress bar implementation where the progress status is determined by the submitAction method. The value for the progress bar is constantly being updated in this method. Here's my code: 1. Parent Component <templa ...

javascriptvue.jsvuejs2

The incorrect sequence of Angular/Protractor functions is causing issues within the tests

Trying to extract the values from a column in a grid and compare them before and after sorting can be tricky. I have two functions set up for this task - one to retrieve the initial column values, and another to check the order post-sorting. However, there ...

javascriptjqueryangularjsangularprotractor

Exploring the Power of GraphQL Args in Mutation Operations

Currently, I am in the process of developing a blog service using express and apollo-express in conjunction with mongodb (mongoose). While implementing mutation queries, I have encountered difficulties in accessing the arguments of a mutation query. I am ...

javascriptnode.jsexpressgraphqlapollo-server

Content Security Policy in Firefox Extension blocking local DataTables js

After downloading the js for DataTables, I attempted to load it onto my Firefox extension but encountered a Content Security Policy block: Content Security Policy: The page’s settings blocked the loading of a resource at self (“default-src moz-ext ...

javascriptdatatablesfirefox-addoncontent-security-policyfirefox-addon-webextensions

Tips for positioning a background image behind page content

I have a webpage with a background image, and now I want to add content that floats over it. However, the code below is placing the content behind the image. How can this be corrected? It's important to note that I'm attempting to achieve the ef ...

htmlcss

Tips for customizing fonts in react-pdf

I am having difficulty in changing fonts within react-pdf. // Register Font Font.register({ family: "Roboto", src: "https://cdnjs.cloudflare.com/ajax/libs/ink/3.1.10/fonts/Roboto/roboto-light-webfont.ttf" }); The default f ...

javascriptreactjspdfnpmfonts

Uh-oh, Ajax encountered a 500 Internal Server Error!

Utilizing ajax to fetch events from my database has hit a snag. Instead of displaying the results, there is nothing visible on the screen, and the console is showing this error message: POST http://www.example.com/system/live_filter.php 500 (Internal Se ...

javascriptphpjqueryajax

The primary HTML file in Angular is unable to access the styles.scss file located in the src/styles directory

Just starting out with Angular. To incorporate the 7-1 scss pattern into my project, I established a styles folder within the src directory named "src/styles", and connected the components to the src/styles/style.scss file successfully. However, I'm ...

htmlangularsassdirectory-structure

Sort through data based on specific data fields upon the button click event using JSON and Vue.js

Is there a way to use JSON files in Vue.js to filter data based on category when a button is pressed? I have objects with categories inside the data. portfolio-v1.json { "data":[ { "image_path":"static/products/DEL ...

javascriptjsonvue.jsvuejs2

Create a custom slider using jQuery that pulls in real-time data for a dynamic user

My goal is to implement a dynamic slider feature in my Django project by using jQuery and ajax. I have managed to create previous and next buttons for swiping through profiles with the help of others, but I am currently facing an issue with a NoReverseMatc ...

javascriptjqueryjsondjangoajax

Modify the classname of two element class i

I am trying to change the class on click within an <i> element that has 2 classes. The first class is always "fa" and the second class can be either "fa-minus" or "fa-plus". I need to toggle between "minus" and "plus" based on the current class. Ca ...

javascriptjquerytoggleclass

Issue with Discord.js (14.1) - Message Handling Unresponsive

After developing a sizable Discord Bot in Python, I decided to expand my skills and start learning JS. Despite thoroughly studying the documentation and comparing with my original Python Bot regarding intents, I am facing difficulties getting the message ...

javascripttypescriptdiscord.js

Accessing a key from an AJAX JSON response and applying it within a .each() loop in jQuery

I'm struggling with a seemingly simple task that I just can't seem to get right. My goal is to convert multiple text inputs into select fields using AJAX and jQuery. Everything works smoothly, except when trying to make the $.each function dynam ...

javascriptjqueryhtmlajaxjson

Alternating CSS Designs for Displaying Multiple Mysql Query Results

I have a website where users can search for a specific product in their location, and the site will display a list of results. if(isset($_POST['zip'])){ $qry="SELECT business_id FROM ".TBL_BUSINESS." WHERE zip LIKE '%".$_POST['zip&apos ...

phpmysqlcss

Removing an element from an array by evaluating each item within the array

Input array: ["temp/1/Lounge/empty", "temp/1/Lounge/66,66,66,66,66,66,66,66,64,64,64,64…,64,64,64,64,64,64,64", "temp/2/Lounge/empty", "temp/3/Lounge/empty"] I have a list of elements like the above. Each element consists of four parts separated by s ...

javascriptarrays

Only the cursor CSS is applied to the parent div, not its individual elements within the div

The current issue with the CSS is that it doesn't apply to the cursor setting. It only works if I set cursor:not allowed; to the .bar class and not specific elements like .bar p. My objective is to have all the p elements initially set to not-allowe ...

jqueryhtmlcss

The process of generating an efficient build gets stuck and never finishes

I am currently facing an issue while attempting to build my React app. Whenever I execute "npm run build," the terminal gets stuck at "Creating and optimized production build..." and doesn't complete the process. I have tried running this on a system ...

javascriptnode.jsreactjsnpmnext.js

Scroll horizontally in a div with a minimum width while it is contained within a column using Bootstrap

I am seeking to create a bootstrap v4 grid with 3 columns, where certain content within the columns require a minimum width. This necessitates a horizontal scroll (overflow-x), but I am encountering some overlap where the scrollbar and content extend beyon ...

htmlcssbootstrap-4

Are there any negatives to turning off create-react-app's SKIP_PREFLIGHT_CHECK option?

After setting up my create-react-app project, I added eslint as a dev dependency. My reasons for doing this include: 1) Running eslint as a pre-commit check using husky and lint-staged 2) Extending CRA's eslint with airbnb and prettier lint configs ...

javascriptreactjsnpmcreate-react-appeslint

What sets apart route.use(), route.all(), and route.route() in Express?

Is it possible to replace router.all() with router.use() if the former just matches all methods? Also, what are the differences between using router.use() and router.route()? ...

javascriptnode.jsexpress