<a> element that works on second click-CodePudding

I'd like to know if it's possible to create an element that works when you clicked it the second time. So you click on it it shows some details and when you click on it now the link works.

CodePudding user response：

var infoEl = document.querySelector('.js-link-info')
var linkEl = document.querySelector('.js-link')
var clickCounter = 0;

linkEl.addEventListener('click', function(evt) {
    clickCounter  ;
    
    if (clickCounter === 1) {
        infoEl.textContent = 'Awesome link. Click again to go there';
        evt.preventDefault();
    }
})

<span ></span><br />
<a href="#" >Click me</a>

CodePudding user response：

I think it's possible with JavaScript only. You can try this example. I created a complete example of how you can do it.

var isFirstClick = true

document.getElementById('link').onclick = function handleClick (e) {
console.log('click', isFirstClick)
  if (isFirstClick) {
    document.getElementById('details').style.display = 'block'
    e.preventDefault()
    isFirstClick = false
    return false
  }

  return true
}

#details {
  display: none;
}

<div id="details">
  some details text
</div>
<a id="link" href="https://example.com/">example.com</a>