Toggle visibility between two A HREF when clicking one of them?

Question

To put it as simple as possible.

I have one

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

and a second

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

I only want PAUSE visible at first, but once it’s clicked it disappears and PLAY becomes visible and so on and so on and so on (toggle)...

It's the classes tubular-pause and tubular-play that are the triggers for the actual pausing and playing of my video. Therefor the action of the clicking need to stay intact and occur before the “toggling” I guess.

Thank you!

@AmitJoki Just edited, please take a look again. – vikar Mar 12 '14 at 02:39 — vikar, Mar 12 '14 at 02:39

score 1 · Accepted Answer · answered Mar 12 '14 at 02:43

1

If you want to do it without jquery, this is pretty easy:

function onButtonClick () {
  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";
  }
}

Demo on codepen.

answered Mar 12 '14 at 02:43

DJ Madeira

366
2
9

Thank you! Action when clicking is still there. Though, I changed from 'block' to 'inline' instead. – vikar Mar 12 '14 at 03:08

score 1 · Answer 2 · answered Mar 12 '14 at 02:46

1

Just use this:

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

Demo: http://jsfiddle.net/fDmLR/

answered Mar 12 '14 at 02:46

Amit Joki

58,320
7
77
95

score 0 · Answer 3 · answered Mar 12 '14 at 02:34

you can use jQuery like this:

$("#play").onlclick(function(){
   $("#play").fadeOut(0);
   $("#pause").fadeIn(0);
});
$("#pause").onlclick(function(){
   $("#pause").fadeOut(0);
   $("#play").fadeIn(0);
});

Sorry if it is not working, I'm still beginner ...

score 0 · Answer 4 · answered Mar 12 '14 at 02:46

0

You can use jQuery toggle. For example

$( "#play" ).click(function(){
  ButtonToggles();
});

 $( "#pause" ).click(function(){
   ButtonToggles();
 });

function ButtonToggles(){
   $("#pause").toggle();
   $("#play").toggle();
}

answered Mar 12 '14 at 02:46

Samuel Gerges

251
3
10

score 0 · Answer 5 · answered Mar 12 '14 at 02:57

0

You can use hide() to hide the #Play anchor by default and use .toggle() to toggle between show and hide between two anchors:

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

Fiddle Demo

answered Mar 12 '14 at 02:57

Felix

37,892
8
43
55

Toggle visibility between two A HREF when clicking one of them?

5 Answers5