Wait until the link is clicked before showing the list element

Is there a way to prevent the display of list element id="two" in the code below until link "#two" has been clicked, removing element id="one"? I am looking for a CSS or JS solution that completely hides the list element rather than just hiding it from view on the page.

If someone can provide a working solution, I am happy to explain why I need this unusual behavior. I am trying to tackle an unresolved issue in another one of my Stack Overflow questions...

<div id="gallery">
<ul id="gallery-interior">
<li id="one"><img src="../images/normal_1"></li>
<li id="two"><img src="../images/notmal_2"></li>
</ul>
</div>


<div>
<a href="#one"><img src="../images/thumb_1.jpg"></a>
<a href="#two"><img src="../images/thumb_2.jpg"></a>
</div>
javascriptjqueryhtmlcss

Answer №1

I crafted a solution for your dilemma utilizing the power of jquery.

Using jQuery:

$(document).ready(function() {
$('a[href*="two"]').click(function() {
    $("#one").hide();
    $("#two").show();
});
})

Check out the working demonstration here: Live Demo

Answer №2

How about something along these lines (assuming you've added id='links' to the div that contains the links):

<script>
$('#links a').on('click', function(){
    $('#gallery-interior li').hide();
    $($(this).attr('href')).show();
})
</script>

To start off, I hide all the li elements within gallery-interior. I noticed that you conveniently included the selector for the element to be shown in the href attribute, so I simply utilize that with jQuery.

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

Inquiries regarding node.js

While delving into research on node.js and Mongodb, I encountered a few areas that require clarification. My aim is to query Mongodb from the web using JavaScript because of my familiarity with the language. Additionally, it aligns well with Mongodb' ...

javascriptnode.jsmongodbweb

A Guide to Testing Directives in Angular 2: Unit Testing Tips

Issue: My goal is to perform unit testing on an Angular 2 directive to ensure proper compilation. In the context of Angular 1, one could utilize the$compile(angular.element(myElement) service followed by calling $scope.$digest(). I am specifically looking ...

javascriptangularjsunit-testingangularangular2-directives

A blank screen of errors pops up when attempting to update through a form

Encountering a white error screen when attempting to add an item using a form in Python / Django. I'm currently debugging the issue but lacking information. Any guidance on where to look next would be greatly appreciated. Models.py from __future__ i ...

javascriptpythonhtmlcssdjango

Sliding an image from the left side to the right, and then repeating the movement from left to right

I am currently working on a CSS effect for some images. My goal is to have an image appear from the left side, move towards the right side, then reappear from the left and repeat this cycle. I managed to achieve this using the code below: @keyframes sli ...

javascripthtmlcsscss-animations

Having trouble accessing a JavaScript variable in Javascript due to reading null property 'value'

What I Require I am in need of passing a URL variable from an HTML document to a JavaScript file. HTML Snippet <script> var urlParam = "{{ page_param.asy_request | replace('&','&')}}"; urlParam = urlParam.rep ...

javascripthtml

How can we utilize CSS floats to achieve maximum widths?

I currently have 5 divs that I need to structure in a specific way: Each div must have a minimum size of 100px The parent container should display as many divs as possible on the first row, with any remaining divs wrapping to new rows if necessary If the ...

javascripthtmlcsscss-float

Is there a way to incorporate a dropdown feature into a search bar using Ant Design?

I'm currently working on a project that requires me to incorporate two drop-down menus inside the search box. Despite following the guidelines provided in the documentation (https://ant.design/components/input), I encountered a problem when trying to ...

cssreactjstypescriptantd

Encountered an issue when trying to establish a connection to the MySQL database on Openshift using a

I am currently running a Node.js app with Express that is deployed on OpenShift. I have set up databases using the PHPMyAdmin 4.0 cartridge. Although I can establish a connection to the database, anytime I run a query, it throws an ECONNREFUSED error. Whe ...

javascriptmysqlnode.jsphpmyadmin

Eliminating redundant files in the upload section

Currently, I am using lodash clonedeep for the purpose of uploading files. I managed to write a function that prevents users from uploading identical files. However, I have encountered an issue where if I delete a file after uploading it, it remains in th ...

javascriptreactjsfile-uploadlodash

Tips for managing Ajax JSON response in a PhoneGap application

Although there are a few posts on this topic, I am struggling to piece together the necessary components to make it work. I am in the process of converting a web application into an app using phonegap and I am attempting to create a search form that retri ...

javascriptjqueryajax

I am receiving a reference error even though the day variable has already been defined. Can you kindly point out

When I attempt to log in, the page is giving me the correct output. Interestingly, even after encountering an error, the webpage continues to function properly. app.get("/", function(req, res) { let day = date.getDate(); console.log(day); r ...

javascripthtmlexpress

Is there a way to display these panels in a scrollable table layout?

My aim is to replicate this specific styling: https://i.stack.imgur.com/jz5lm.png This type of table shown above is being dynamically imported via Redux: class LocationList extends React.Component { componentDidMount() { this.props.fetchLocations( ...

javascripthtmlcssreactjsflexbox

Looking to prevent horizontal scrolling on smartphones in an HTML webview - how can I do this?

Currently, I am dealing with a webview and encountering some peculiar behavior. The overflow-x property is set to hidden, which works perfectly on browsers. However, when accessed on a mobile device, the overflow seems to be ignored completely. Here is t ...

htmlcsswebview

Switching from an AJAX GET request to a POST request involves updating the

I have been trying to figure out how to convert my AJAX GET query to POST by reading forums and searching on Google, but I am still confused. If someone could assist me with this, it would be greatly appreciated. Thank you! Here is the code snippet I am w ...

javascriptajax

automatically created button, form control named 'answer' that is not valid

Struggling with a challenge in attaching an event to a dynamically generated button. Despite conducting some research, most of the solutions suggest that this issue is typically related to a form control. However, in my scenario, the error "invalid form co ...

javascriptjqueryhtmlforms

I'm having trouble getting my HTML POST request form to connect with the Express app.post. Any tips on how to properly pass on numeric variables to a different POST request?

There seems to be a misunderstanding or error on my part regarding POST and GET requests based on what I've read online. On myNumber.ejs, I have a submit form. Upon submission, the view switches to Add.ejs. The goal is for Add.ejs to display both the ...

javascripthtmlnode.jsexpress

Mobile devices experiencing issues with Bootstrap navbar collapse functionality

When I resize my browser, everything looks fine. However, when I try to access the website from my phone or tablet, it loads the desktop version that is not collapsed properly. Could there be any issues with my HTML code? <nav class="navbar navbar-cus ...

htmltwitter-bootstraptwitter-bootstrap-3

Ensure that an input field on the PHP form is required

Currently working on a form with multiple input fields. I'm wondering if there's a way to prevent the form from being submitted to the server if a specific field is left empty. I'd like to use a JavaScript pop-up box to notify the user inst ...

javascriptphpjqueryhtml

Enhance the appearance of Ionic popups

Can someone help me with resizing a pop up? I've been struggling to get it right. This is the popup template in question: <ion-view> <ion-content scroll="false" class=""> test </ion-content> < ...

javascriptangularjsionic-frameworkpopup

Upon receiving AJAX-content, the next iteration of the $.each function will be triggered

This question has been asked on an online forum in the past, but it was around four years ago and there may be a more efficient solution available now. In my code, I have a loop that sometimes requires additional data to be fetched through ajax calls. Af ...

javascriptjqueryajaxasynchronousjquery-deferred