zurb foundation 4 reveal modal changing the text in the data-reveal-id=“myModal”

Question

Hi Sorry if this is a numpty question.
I'm using reveal and the modal is working fine.
The text "show info" when clicked is working. How would I set the text up so when clicked it changes to "Hide Info"

function toggle() {
    var ele = document.getElementById("toggleText");
    var text = document.getElementById("myModal");
    if(ele.style.display == "block") {
        ele.style.display = "none";
        text.innerHTML = "show";
    }
    else {
        ele.style.display = "block";
        text.innerHTML = "hide";
    }}

a> id="myModal" href="javascript:toggle();" data-reveal-id="myModal"> show /a

Answer 1

How would I set the text up so when clicked it changes to "Hide Info"

What you are trying to do does not make sense. Why, because the element that causes your reveal to show up is "outside" the modal. Otherwise, if it's inside, then you won't be able to open the modal through that element. Based on that description you have something like this:

<a href="#" data-reveal-id="myModal" id="modalTrigger">Open Modal</a>
<div id="myModal" class="reveal-modal">
    <h1>My modal</h1>
    <a class="close-reveal-modal">&#215;</a>
</div>

Now you want the modalTrigger to change text to indicate closing the modal (ie "Hide Modal") but it does not make sense because the modal can be closed by:

• clicking anywhere on the page but the modal
• clicking on the "x" link on the modal

So the Hide Modal element that is outside the modal is useless at the point the modal is shown.

Maybe you are referring to changing the text on the modal itself, yet again, it's useless because you can already set it's text to "Close Modal" like so:

<a href="#" data-reveal-id="myModal" id="modalTrigger">Open Modal</a>
<div id="myModal" class="reveal-modal">
    <h1>My modal</h1>
    <a class="close-reveal-modal">&#215;</a>
    // inline js to make a simple example
    <a class="button" 
      onclick="javascript:$('#myModal').foundation('reveal', 'close')">
      Close Me</a>
</div>

So you see you don't have to change anything to indicate that an element can close the modal.

If your question is you want to happen something else after the modal is opened then that is achievable. A good example is if the modal's content will be coming from a database and it will take some time to load, so you show an image loader while the fetching is done. You then want that loader "to close only after the modal is shown". You can do something like this:

$(document).foundation('reveal', {
    opened: function () {        
        closeImageLoader();
    },
});