How can I switch the visibility of two A HREF elements by clicking on one of them?

Let me break it down for you in the simplest way possible.

First off, there's this

<a href="#" id="PAUSE" class="tubular-pause">Pause</a>

and then we have a second one

<a href="#" id="PLAY" class="tubular-play">Play</a>

All I want is for PAUSE to be visible initially. When it's clicked, it should disappear and PLAY should show up, and vice versa (toggle)...

The classes tubular-pause and tubular-play are the key players here when it comes to pausing and playing the video. So, the clicking action has to come before the toggling process, I suppose.

Appreciate your help!

javascriptjqueryhtmlcsstubular

Answer №1

If you're looking to achieve this without using jquery, it can be done quite easily:

function toggleButtons() {
  var playButton = document.getElementById("play");
  var pauseButton = document.getElementById("pause");

  if (pauseButton.style.display === "none") {
    pauseButton.style.display = "block";
    playButton.style.display = "none";
  } else {
    playButton.style.display = "block";
    pauseButton.style.display = "none";
  }
}

Check out the demo on codepen.

Answer №2

Try out this simple code snippet:

$('#PLAY').hide();
$('#PAUSE').click(function () {
    $(this).hide();
    $('#PLAY').show('fade');
});
$('#PLAY').click(function () {
    $(this).hide();
    $('#PAUSE').show('fade');
});

See it in action: http://jsfiddle.net/fDmLR/

Answer №3

One way to implement jQuery is shown below:

$("#start").onlclick(function(){
   $("#start").fadeOut(0);
   $("#stop").fadeIn(0);
});
$("#stop").onlclick(function(){
   $("#stop").fadeOut(0);
   $("#start").fadeIn(0);
});

Apologies if there are any errors, I'm just starting out with this...

Answer №4

If you're looking to utilize jQuery toggle functionality, consider the following example:

$( "#start" ).click(function(){
  ButtonToggle();
});

 $( "#stop" ).click(function(){
   ButtonToggle();
 });

function ButtonToggle(){
   $("#stop").toggle();
   $("#start").toggle();
}

Answer №5

If you want to hide the anchor with ID "Play" by default, you can use the hide() function. Then, you can toggle between showing and hiding two anchors using the .toggle() method like this:

$('#PLAY').hide();
$('#PLAY, #PAUSE').click(function () {
    $('#PLAY, #PAUSE').toggle();
});

Check out this Fiddle Demo for a live example.

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

The loading feature of jQuery UI Autocomplete - .ui-autocomplete-loading is ingenious

When fetching the XML file for the search box, I would like to apply this css. It currently takes around 3 seconds to load the file. In the autocomplete.js file, I found these two functions: _search: function( value ) { this.term = this.element ...

jquerycssjquery-uiautocomplete

Tips for aligning hyperlinks in the navigation bar using CSS3 and HTML5

Struggling to center the links in the navigation bar has been a challenge. I really want those buttons smack dab in the middle of the header bar, but despite trying everything, they stubbornly remain on the left-hand side. .header { overflow: ...

htmlcssnavcentering

The digest string for the crypto.pbkdf2Sync function is malfunctioning

I've been working on revamping the authentication system for an old application that previously ran on node 4.5, but I keep encountering an error whenever I attempt to log in. TypeError [ERR_INVALID_ARG_TYPE]: The "digest" argument must be one of type ...

javascriptnpm

Changing the height of a table row using CSS transitions

I need help with a CSS table that has rows of the same height. I want to make it so that when a user clicks on one row, that row expands to fill the entire table height while the other rows fade away. I originally had this working by setting display:none o ...

csscss-transitionscss-tablesrow-height

How can I line up the bootstrap datepicker with a bootstrap column?

I currently have Bootstrap 3.3.7 and a bootstrap datepicker version 1.6.4 integrated into my project. However, I am facing an issue where the datepicker does not fill up the designated column within a div with the class col-md-6. Here is the HTML code sni ...

htmlcsstwitter-bootstrapdatepicker

How to make a routerLink clickable within an anchor tag in Angular 6

I am facing a peculiar issue with a group of hyperlinks. html <div class="col-12 navlinks"> <div class="text-center"> <div class="justify-content-center"> <a class="col-auto d-inline-block whitelink" rou ...

htmlangularanchor

Troubles encountered with image referencing while generating a styleguide via kss-node

I'm currently utilizing the NodeJS implementation of KSS for my project. The file structure I am working with is as follows: styles (.scss files) public (compiled .css files) images (images & sprites) guide (auto-generated style ...

cssnode.jssassdocumentation-generationknyle-style-sheet

What is the best way to create a new row within a Bootstrap table?

Struggling to format an array inside a table with the `.join()` method. The goal is to have each car on a separate row. Attempts using `.join("\r\n")` and `.join("<br />")` have been unsuccessful. What am I overlooking? ...

javascriptarraystwitter-bootstrapvue.js

Challenges arise when using two side-by divs with a 100% height

Caution: This page may include NSFW images. I am attempting to set the left div to a width of 300px and have the right one fill the remaining space on the page. After finally getting them to sit side by side, I encountered some strange height issues due ...

cssheightcss-float

The error message 'Cannot read property 'navigate' of undefined' is displayed because the function '_this.props.navigation.navigate' is not

I'm facing an issue trying to access 'Home' from Form.js. Despite my efforts in arrowF, routes, and other methods, the same error persists. How can I resolve this? In my Form.js file, when I call onPress=(), I have tried using functions, ...

javascriptreactjsreact-native

The addition of a cancel swipe feature to an HTML5 eBook is causing the text input field for note-taking to malfunction

I am currently working on the development of a process to create HTML5 based eBooks for both desktop and mobile use using Adobe InDesign and exporting them with a plugin called In5. This plugin allows for the incorporation of html, css, and javascript duri ...

javascripthtmljquerycssadobe-indesign

Expressjs Error- ReferenceError: cors has not been defined in this context

While working on creating a backend using ExpressJs, I encountered an error when running the backend. app.use(cors()) ^ ReferenceError: cors is not defined at Object.<anonymous> (C:\Users\hp\Desktop\Entri\kanba\ ...

javascriptnode.jsexpress

Is it considered poor form for an Angular controller to invoke a function on a directive?

My custom Angular directive functions as a unique combobox, where clicking on the input control reveals a div below it with a list of items from a model object. The user can type text into the input control to filter the displayed list. In addition to the ...

javascriptangularjsmodel-view-controllercontrollerangularjs-directive

In order to enable automatic playback of background images

Having created a slider with hover functionality on icons to change background images, I now seek to add an autoplay feature to the slider. The slider was implemented in a WordPress project using Elementor and involved custom Slider creation through JavaSc ...

javascriptjquerywordpresscontent-management-systemelementor

Eliminate every instance using the global regular expression and the replace method from the String prototype

function filterWords(match, before, after) { return before && after ? ' ' : '' } var regex = /(^|\s)(?:y|x)(\s|$)/g var sentence1 = ('x 1 y 2 x 3 y').replace(regex, filterWords) console.log(sentence1) sentence2 ...

javascriptregexstring

Upon encountering an expression, the code anticipated either an assignment or a function call, but instead found an expression, triggering the no

When using the forEach method within a function in JavaScript, I encountered a code compilation failure with the following error: Expected an assignment or function call and instead saw an expression no-unused-expressions. This error occurs for both ins ...

javascriptreactjseslint

Implement a responsive CSS division that simulates a two-column table

In my layout, I have three row divs: header, content, and footer. My goal is to create a table-like format within the content div to display information. Here's an example: .itemwrapper{width:600px;} .picture{width:150px;float:left;} .item{width:45 ...

csslistmultiple-columns

Angular: Struggling with Parent Component not recognizing changes in Child Component

Currently, I am facing an issue with my shopping cart functionality. When the website first loads and a user does not have a saved shopping cart, they need to click "add to cart" before one is created. The problem lies in the fact that my app.component doe ...

javascriptangularangular6

Exploring the capabilities of data processing in Node.js

I've been attempting to read data from a locally stored JSON file, organize it into individual JS objects, and add them to a queue. However, I'm struggling to find a way to test my parsing function to ensure it's functioning correctly. My cu ...

javascriptnode.jsjsonfs

What is the most effective way to retrieve JSON data from a custom SQL query?

I'm working with this PHP code snippet: <?php $servername = "host"; $username = "user"; $password = "passw"; $dbname = "dbname"; $conn3 = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password); $conn3->setAttribute(PDO::ATTR_E ...

phpjquerymysqljson