Hidden Containers

User 2601283 Photo


Registered User
217 posts

How do you set a container to be hidden at various break points within SD 3? I need the item visible when posted, but would like to hide it when working in the program.
User 244626 Photo


Registered User
776 posts

For Foundation 6 you could use Visibility Classes. "hide" class works for sm and up. There are quite a few others if you start typing you will see the drop down for the Foundation classes available.
User 2601283 Photo


Registered User
217 posts

thank you
User 2699991 Photo


Registered User
2,826 posts
Online Now

Angie Mulligan wrote:
thank you

Don't forget to put them back to how they were once you have finished working, otherwise, they will still be still be hidden when you publish the project
The Help You Need: When You Need It The Most
User 244626 Photo


Registered User
776 posts

Wayan Jaya wrote:
Angie Mulligan wrote:
thank you

Don't forget to put them back to how they were once you have finished working, otherwise, they will still be still be hidden when you publish the project


While it in my opinion it would be considered a bad approach one could add a bit of jquery to remove the "hide" class when the page loads. As long as the element is below the fold, it would never be seen. Again, the design should not dictate how the final code is loaded but someone may have good reason to do so. It may also be better to target the id's of elements as "hide" and "show" classes may be used on other component actions.


<script>
$(document).ready(function() {
$('.hide').removeClass('hide');
});
</script>

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.