<div>
<div class="content wysiwyg-content">
Hello.<br />
<br />
I have a new gallery that is sorted based on the HTML5 &quot;data-keywords&quot;.<br />
<br />
When landing on the page, it automatically displays ALL of the images - I can then click on the various categories to display their respective images.<br />
<br />
<br />
What I would like, is when I first land on the page, I would like NONE of the images to appear. &nbsp;Then I could click the various category links to display their respective images.<br />
<br />
How can I do this?<br />
<br />
(I have attached the .js file for you to check out - Please let me know if you need to see the .CSS or .HTML files)<br />
<br />
<br />
Thank you!<br />
Shane<br />
<a href="https://filedb.experts-exchange.com/incoming/2013/07_w27/664533/sortable-gallery3.js" target="_blank" class="file-inline" title="javascript file (3 KB)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M67.508 468.467c-58.005-58.013-58.016-151.92 0-209.943l225.011-225.04c44.643-44.645 117.279-44.645 161.92 0 44.743 44.749 44.753 117.186 0 161.944l-189.465 189.49c-31.41 31.413-82.518 31.412-113.926.001-31.479-31.482-31.49-82.453 0-113.944L311.51 110.491c4.687-4.687 12.286-4.687 16.972 0l16.967 16.971c4.685 4.686 4.685 12.283 0 16.969L184.983 304.917c-12.724 12.724-12.73 33.328 0 46.058 12.696 12.697 33.356 12.699 46.054-.001l189.465-189.489c25.987-25.989 25.994-68.06.001-94.056-25.931-25.934-68.119-25.932-94.049 0l-225.01 225.039c-39.249 39.252-39.258 102.795-.001 142.057 39.285 39.29 102.885 39.287 142.162-.028A739446.174 739446.174 0 0 1 439.497 238.49c4.686-4.687 12.282-4.684 16.969.004l16.967 16.971c4.685 4.686 4.689 12.279.004 16.965a755654.128 755654.128 0 0 0-195.881 195.996c-58.034 58.092-152.004 58.093-210.048.041z"/></svg>sortable-gallery3.js</a>
</div>
</div>


sortable-gallery3.js

Hello.

I have a new gallery that is sorted based on the HTML5 "data-keywords".

When landing on the page, it automatically displays ALL of the images - I can then click on the various categories to display their respective images.


What I would like, is when I first land on the page, I would like NONE of the images to appear.  Then I could click the various category links to display their respective images.

How can I do this?

(I have attached the .js file for you to check out - Please let me know if you need to see the .CSS or .HTML files)


Thank you!
Shane

jQuery - Stop auto display on screen load

jQuery (Core) is a cross-browser JavaScript library that provides abstractions for common client-side tasks such as Document Object Model (DOM) traversal, DOM manipulation, event handling, animation and Ajax. jQuery also provides a platform to create plugins that extend jQuery's capabilities beyond those already provided by the library.

jQuery

JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and  in almost every mainstream web browser.