Conceal hyperlink repeatedly using jQuery

I am struggling with implementing a feature where I have two links, one displayed and the other hidden. Upon clicking the first link, it should disappear and the second link should be displayed. Clicking the second link should then hide itself and show the first link again in its place.

Here is the code snippet I am working with:

HTML

<a class="link-one" href="javascript:void(0)" rel="do-2">Link one</a>
<a class="link-two" href="javascript:void(0)" rel="do-3">Link two</a>

jQuery

$(".link-one").live('click',function(){
    //some actions
    $(this).hide();
    $(".link-two").show().on('click',function(){
        //some actions
        $(this).hide();
        $("link-one").show();
    });
});

CSS 

.link-two{ display: none;}

I would greatly appreciate any assistance or hints on what might be causing issues with my implementation. Thank you!

javascriptjquerycss

Answer №1

To create a more efficient solution, assign a common class to both links and then utilize a single function (let's call it alterLink)

$(".alterLink").click(function() {
    /*
    $(this).hide();
    $(".alterLink").not(this).show();
    */

    //As suggested in the comments, this approach is simpler (assuming there are only 2 links)
    $(".alterLink").toggle();
});

Check out the demo: http://jsfiddle.net/zDQde/

Answer №2

Begin by switching from the deprecated 'live' to '.on'. Also, ensure that your first selector includes the '.'.

Without delay, here is the updated code:

$(".link-one, .link-two").on('click',function(){
    $(".link-one, .link-two").toggleClass('hidden');
});

.hidden
{
display:none;
}

Make sure to apply the 'hidden' class to link-two right from the start.

Answer №3

$('.link-one,.link-two').click(function () {
    $('.link-one,.link-two').toggle()
});

Demo on jsFiddle

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

Enhance your Vue.js app with seamless page transitions using the

I am facing an issue and need some help. My goal is to create a web application-like interface. However, when I use vue.js transitions, it displays like this: https://i.sstatic.net/U1g6M.gif The transition automatically resizes, repeats, and changes si ...

htmlcssvue.jstransition

Tips for resolving div overlap issues when utilizing a customized div within a container-fluid layout (Bootstrap)

As a newcomer to HTML, CSS, and Bootstrap, I encountered an issue with overlapping divs when resizing the screen to be smaller. The problem arose when using container-fluid as a section and implementing a customized div for the section header. Despite atte ...

htmlcssbootstrap-4

What is the best way to ensure consistent display of a bootstrap 4 card structure on both mobile and desktop devices?

I'm attempting to make the bootstrap card look the same on mobile as it does on desktop, but I haven't been able to find a solution online. No snippets have been helpful! Below is a comparison of the appearance of the bootstrap v4 card: Desktop ...

htmlcssbootstrap-4

What are the steps to switch multiple CSS styles for creating a dark mode?

I'm currently using a combination of HTML, CSS, and JavaScript to construct my website. One feature I'd like to implement is a Darkmode switch button that toggles between Dark and Light mode when clicked. However, the issue I'm facing is tha ...

javascripthtmlcssdarkmode

Load JavaScripts asynchronously with the function getScripts

Asynchronously loading scripts on my login page: $.when( $.getScript("/Scripts/View/scroll-sneak.js"), $.getScript("/Scripts/kendo/kendo.custom.min.js"), $.Deferred(function (defer ...

javascriptjquery

Error: React-Redux unable to locate Redux context value while utilizing useSelector function

After creating a store and authreducer, everything was working as expected. However, when I added the useSelector in app.js, an error occurred: ERROR Error: could not find react-redux context value; please ensure the component is wrapped in a <Provid ...

javascriptreact-nativereduxreact-reduxexpo

Angular and Bootstrap do not support margin styles

While working with Angular 5 and Bootstrap, I have encountered an issue with using inline styles for margin. The template I am using is as follows: @Component({ selector: "dynamic-container-component", template: ` <div styl ...

cssangularbootstrap-4

Instructions on how to eliminate the minutes button from Material UI datetime picker

I'm currently working on customizing a datetimepicker from materialUI in ReactJS. My goal is to prevent the user from seeing or selecting minutes in the picker interface. Despite setting the views prop to include only year, month, date, and hours, use ...

javascriptreactjsmaterial-uidatetimepicker

What is the proper method for overriding styles in material-ui v5 for properties that are not present in the themes components?

Currently, I am customizing MuiDataTables using the adaptv4theme in the following manner: declare module '@material-ui/core/styles/overrides' { export interface ComponentNameToClassKey { MUIDataTable: any; MUIDataTableFilterList: any; ...

javascriptmaterial-ui

The JSON data may be improperly formatted

My script is not functioning correctly, it returns about 20 undefined values before finally displaying the full_name: function retrieveUserInfo(phrase) { $.ajax({ url: 'get_staff_details.aspx?rand=' + Math.random(), type: &ap ...

jqueryjsonasp.net-3.5

Socketio: Issue: Isolated surrogate U+D83D is not a valid scalar value

I've been experiencing frequent crashes with my node.js server recently, all due to a recurring socket.io error. It seems that the client may be sending invalid UTF strings, causing an error in the utf8.js file. I'm getting frustrated with the co ...

javascriptnode.jsexpresssocket.io

How can I implement JQuery colorbox in a JSP file without creating a new file for content within a specific div?

Currently, I am utilizing JQuery colorbox in the following way: A link (represented as a button) with the class cboxElement displays the html content of colorbox from another JSP file when clicked. Everything works smoothly up to this point. However, I am ...

jqueryjsphtmlcolorbox

disable caching for xmlhttp request

One issue I am facing is with a JavaScript function that retrieves JSON data via an Ajax request. The problem I'm encountering is that the browser starts caching the response to this request, which means I am not getting the most recent data from the ...

javascriptphpajaxhtmlcaching

Ways to send data to a popup in svelte

Hey there, I could really use some assistance with my Svelte app. I'm trying to implement a modal and pass a parameter to the modal component in order to customize its content. However, when using the open() function of Modal, we only need to provide ...

javascripthtmlcssmodal-dialogsvelte

Check for a rapid return if the function ends up returning null in JavaScript

Is there a way to make this code more concise? const result = getResult(); if (!result) { return; } // Work with result I have several instances of this code in my project and I'm looking for a simpler solution like: const result = getResult() ...

javascripttypescriptecmascript-6

Verifying in PHP if the request is intended for a JavaScript worker

After doing my research on MDN for the referrer-policy, as well as searching through Google, DuckDuckGo and Stack Overflow, I still find myself stuck on a seemingly simple yet elusive issue. Journey of Data the browser sends a request to the server the ...

javascriptphphttp-headersweb-worker

Tips for updating a div element while maintaining its style and select2 plugin functionality with jQuery

Within the HTML code, I am attempting to refresh the following div: <select name="test[]" id="test" multiple required class="select2"> @foreach($tests as $s) ...

javascripthtmljquerylaravel

What is the best way to achieve maximum height?

Currently, I am attempting to obtain the total height of the page in order to apply it to the styles, specifically for the darkMask class. The reason for needing this height is that when a certain action is triggered within the header, a dark overlay is a ...

javascriptreactjsnext.jsserver-side-rendering

Trigger the AJAX method once the partial post back has finished executing

Currently, I am facing an issue with my update panel on the webpage. Within $(document).ready(), I trigger a partial post back of the update panel. After this partial post back is done, I need to make an AJAX call like the one below: __doPostBack('&l ...

jqueryasp.netajax

Error: Unable to access the currentTime property as it is not defined

Incorporating Videojs into my react application has presented a challenge. I am attempting to set the current time of the videojs player, but keep encountering an error that reads "cannot read property currentTime of undefined". Below is my approach: var ...

javascriptreactjsvideo.js