Member Avatar for JameB

I have a javascript function to toggle a specific id sent to the function

<script type="text/javascript">
function toggle(id) {
	var localId  = document.getElementById(id)
	if (localId.style.display == 'none') { localId.style.display = 'block' }
	else { localId.style.display = 'none' }
}
</script>

I want to do the same in jQuery, I found some tutorials and I got one to work but I don't understand jQuery syntax at all and I am kinda confused.

$(document).ready(function(){

	//Hide (Collapse) the toggle containers on load
	$(".toggle_container").hide(); 

	//Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
	$("h2.trigger").click(function(){
		$(this).toggleClass("active").next().slideToggle("slow");
	});

});

I got that to work with the next element but not with a specific id. I need it to be a specific id because I have almost 5 toggles per page and I find it easier to manage to ask the script to toggle by a specific id...

Just so that its clear, this is how I am using the javascript function:

<a href='javascript: toggle("rules_t")'>
<img src="lalala.png" id="rules" class="hoverOpacity" padding="5px"/>
</a>
<p id="text">A link to this season's official rules and related links.</p>

<div id="rules_t" style='display: none'> <?php include("gaga.php"); ?> </div>

Can someone help me convert that javascript into that smooth toggling jquery?

  • 3 Contributors
  • 5 Replies
  • 291 Views
  • 22 Hours Discussion Span
  • Latest Post Latest Post by JJenZz
Member Avatar for scrappedcola

To grab an element by a specific id use syntacx

function toggle(idToToggleBy)
{
    $("#"+idToToggleBy).toggleClass("active");
}
commented: THanks! It worked like a charm! +2
Member Avatar for JameB

Alright, that worked! :)

Is jquery the same as javascript? If someone has disabled javascript, will they still be able to see my website's toggling content?

Member Avatar for scrappedcola

yes jQuery is Javascript. It is a framework or a set of libraries that make common tasks in javascript easier.

Member Avatar for JameB

I want to make sure that people with JavaScript disabled get to see the content they'll be missing out on.

USING JavaScript to change the 'display' to 'none' would do the trick right? Because they have it disabled, it won't become 'display: none;' and therefore will be displayed? Yes?

Member Avatar for JJenZz

In response to your last question, you can use JavaScript to add a 'js' class to your <html> element which you can then use to style how elements will appear when JS is enabled.

To add the 'js' class to your <html> tag, you would add something like this to your <head>:

<script>document.getElementsByTagName('html')[0].className += ' js ';</script>

.. then your CSS would look like:

.js .toggle-content {
    display: none;
}

Just add the .toggle-content class to all your boxes whose content is toggled and they will be hidden when the page loads, only if JS is enabled.

Also, you could really simplify your markup and JS and still get what you're trying to achieve.

HTML:

<img src="lalala.png" class="toggle-trigger hoverOpacity" padding="5px"/>
<p id="text">A link to this season's official rules and related links.</p>
<div class="toggle-content"><?php include("gaga.php"); ?></div>

jQuery:

// on DOM ready
$(function() {
    $('#myContent').find('.toggle-trigger').click(function(e) {
        e.preventDefault();
        $(this).nextAll('.toggle-content:first').toggle();
    });
]);

Now you can just add .toggle-trigger and .toggle-content class to whichever elements you want to toggle (replace the #myContent ID with whichever ID your content element has that surrounds all your toggles... this will improve performance).

Edited by JJenZz because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.