Toggle

On the final page of my website there is a lot of content to display. I have drawn out images for a very vast array of marine life and have a table and link that correlates to each of them. All in all there are 13 images, 13 tables and 13 links. Not to mention headers for each category of animal and padding/margins to space them all out. This would create a gargantuan page and you would have to scroll for ages to get to the next category. I wanted to have the content hidden when you load the page but then at the click of a button have it reveal itself. I again took to the web and found the "slideToggle" feature in jQuery.

This effect switches an element between two states through the stimulus of an outside element (e.g. a button). Similarly to the sticky navigation post I struggled to find accurate and reliable coding online because they were all quite specific and so I wrote my own. Here it is:

This is incredibly simple code which is great. I basically had to assign an ID to each button for each heading. This meant that when that button was pressed it would effect the correlating content wrapper. I have 5 different categories. And so 5 different buttons and 5 different content wrappers. This an example of the code structure in the HTML:

As you can see there is the heading for the section, the toggle button within a div and then the section which contains all the images and tables etc.. This makes it so I can open and close the content without effecting the heading for the section and the button. the jQuery just states that when the button is clicked it performs a function; that function being toggling the correlating section between slideUp and slideDown. This dynamically opens and closes the content in an engaging way. The "slow" and "swing" values mean that the slide happens slowly and in a soft manor. That means that there is a gradual increase and decrease in speed at the beginning and end of the animation. It eases the animation similar to the Easy Ease keyframes in After Effects.

The only issue with this was that when the page was loaded for the first time all the content was being displayed. That is why the first line of the jQuery is "$("#sharks").hide();". This is the first thing the page reads and it just instantly hides the content.

The only other thing was that once you scrolled to the bottom of the content you then had to scroll all the way back to the top to close it again. This was a simple solution. I merely placed a button at the very bottom of the section within the tag which would close the section again.

Here's the HTML:

And here's the jQuery:

The fact that the button is before the closing section tag means that it is hidden with the content when the page loads and right at the bottom before the next section when you scroll down. The jQuery is really simple too. It is similar to the toggle button however a click of the button merely slides the content up with the slideUp function. There is no need for the toggle function because once closed the button is no longer accessible.

I wanted to style the buttons in quite a bright way because otherwise the page would be quite boring with just white headings and blue background. I coloured them the same as the tables/nav elements. This made them bold and striking yet still in-keeping with the colour scheme. I used a box shadow to create a 3D depth illusion and moved it when activated to create the illusion of the button being clicked.

Toggle button:

Here's the CSS:

Here's the final product:

And the button when clicked:

Close button:

The CSS:

The final product:

The button when clicked:

For the back buttons (which are round) I kept the original rules as they still all worked I simply specified a different font, size and changed the border radius to 50%. This means that each corner curves 50% of 180 degrees and that means that it makes a perfect circle when all four are combined to make 360 degrees. For the active state I made it so the shadow decreases in size and it gets a little dimmer creating the illusion of the button being pushed back in space and being shadowed slightly.

The other thing I felt the need for on the page was an information section telling you how to use the page (as I felt it wash;t immediately clear). This was slightly different as I wanted the info displayed at page load but when you closed it up, to make it less garish, I wanted the button to fade slightly. This is the jQuery I used for this effect:

I have borrowed code from the sticky nav jQuery with the "toggleClass" function. I have used CSS transitions to handle the opacity as I thought it was a little more reliable and browser friendly. The button press both slides the content above it shut and also changes the class of the button.

Here's the CSS: