hide and show link

Question

Hello again! It there a way to make a link/text fade in and out using the same link?

It is tied to my previous question.

Now it shows like this.

I would like to do when link_2 is clicked, link_1 and link_2 will disappear for a bit and then show up again after the texts show up.

I saw live macros, but its said is for Harlowe.

 

Answer 1

You'll probably have to work with a widget. First head to your stylesheet to create the kind of transition you want - tweak it around until it fits:

@keyframes example {
  0% {opacity: 1;}
  50% {opacity: 0;}  
  100%  {opacity: 1;}
}


.fade-inout {
  opacity: 1;
  animation-name: example;
  animation-duration: 1s;
}

Then create a passage and give it the tag "widget" to define your widget there:

<<widget mylink>><<nobr>>

<span class="fade-inout">
[[link 1]]
<<link "link 2">>
	<<replace ".fade-inout">><<mylink>><</replace>>
	/*The rest of your code for link 2 here*/
<</link>>
 </span>

<</nobr>><</widget>>

Now you can add these specific two links to your initial passage:

<<mylink>>

 

Comments

Thank you so much! It worked!