CODEWITHSUNDEEP
javascriptjqueryfeatherlight.js
Brian Fleishman
Brian Fleishman

Reputation: 1257

Using FeatherLight to show a DIV

I am using the featherlight lightbox plugin to show the contents of a DIV when a button is clicked.

Here is my button:

<INPUT id="mileageButton" <cfif #get_trips.recordcount# NEQ 0>style="color:red; font-weight: bold;"</cfif> class="mileage" Type="BUTTON" VALUE="Mileage" onClick="$('##mileage-modal-open').trigger('click');"> <a id="mileage-modal-open" href="##" data-featherlight="##mileage" ></a>

Here is my DIV:

<div id="mileage" style="display:none;">
</div>

The problem I am having is that I do not want to DIV to be visible until the button is clicked, so I set the display attribute to 'none'. However it stays hidden all the time and consequently my lightbox is empty.

How can I have the attribute changed to 'block' when I click the button but back to 'none' when I close the lightbox?

Upvotes: 0

Views: 1333

Answers (1)

Luis Paulo Lohmann
Luis Paulo Lohmann

Reputation: 414

Keep your DIV visible and put it inside another one that is hidden. That way, when featherlight opens it, it will show up.

Upvotes: 3

Related Questions