Menu icon Foundation
Data-Openable?

I've run into several instances where I just need to add a class to show or unhide something that isn't a modal. data-open appears to only work with the modal. There's data-closable to hide something, and data-toggler to hide/show. But I really just need to open an element once.

Right now I'm just rolling my own jQuery functions, but it would be super handy if I could use something already built into Foundation. I just can't seem to find it.

toggler

I've run into several instances where I just need to add a class to show or unhide something that isn't a modal. data-open appears to only work with the modal. There's data-closable to hide something, and data-toggler to hide/show. But I really just need to open an element once.

Right now I'm just rolling my own jQuery functions, but it would be super handy if I could use something already built into Foundation. I just can't seem to find it.

Michelle Anderson over 1 year ago

Here's a Pen example of what I'm trying to do. The "Open Panel" is the one that doesn't work. I know "data-openable" isn't a thing, but thought it was worth a shot.

 

https://codepen.io/anon/pen/yjXLYg?editors=1000

 

    <p><a data-toggle="panel">Toggle Panel</a><br />
      <a data-open="panel">Open Panel</a> <br />
      <a data-close="panel">Close Panel</a></p>

      <div class="callout" id="panel" data-toggler data-closable data-openable data-animate="fade-in fade-out">
          <h4>Hello!</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta quas optio alias voluptas nobis iusto mollitia asperiores incidunt reprehenderit doloribus voluptatibus officiis minus, inventore, quasi nisi. Consequuntur, quidem. Sint, dicta?</p>
      </div>