by Ange Tuteur August 9th 2015, 7:23 pm
Well, for example you have the following HTML :
- Code:
<input class="contentToggler" type="button" value="Toggle"/>
<div style="display:none" class="contentContainer">CONTENT</div>
Then your JavaScript :
- Code:
$(function() {
$('.contentContainer').hide(); // hide elements with the contentContainer class
$('.contentToggler').click(function() {
$(this).next().slideToggle(); // toggle the container ( which is NEXT to it )
});
});
( I'll be using mainly jQuery for this example )
The first query on
.contentContainer finds and sets all elements with this class to display:none;
The second query on
.contentToggler applies a function that will be executed when it's clicked.
The third query is inside the function.
this refers to the button you just clicked, and we use next() to move over to the next element which is .contentContainer. Once we're on it, we execute slideToggle() which will slide up or down depending on the display state.
It's a basic spoiler concept. With the example I gave you, you could put that script in JS codes management and it'll apply what's written to any elements that have the specified classes. Then you can use the HTML I gave you anywhere.
If you want a more simple example to play around with, here's one for HTML pages.
- Code:
<input class="contentToggler" type="button" value="Toggle"/>
<div class="contentContainer">CONTENT</div>
<script type="text/javascript">
$(function() {
$('.contentContainer').hide(); // hide elements with the contentContainer class
$('.contentToggler').click(function() {
$(this).next().slideToggle(); // toggle the container ( which is NEXT to it )
});
});
</script>
Just make sure to choose "Use your forum header and footer", otherwise you'll need to include the jQuery library.
Home
