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
  • 359 Views
  • 22 Hours Discussion Span
  • Latest Post Latest Post by JJenZz

Dani AI

Generated

Short, practical summary and updated options for (building on answers from and ).

For simple, accessible toggles that work without JavaScript, prefer the native HTML5 control first — it gives keyboard support and a built-in open/closed state, so no extra scripting is required:

<details>
  <summary><img src="lalala.png" alt="rules"></summary>
  <?php include("gaga.php"); ?>
</details>

If you need a sliding effect or finer control, use unobtrusive handlers plus semantic triggers and ARIA. Keep content visible by default (so non-JS users see it), then let JavaScript hide/animate it when present. Use data attributes to pair triggers and panels and toggle an accessible state (aria-expanded / aria-controls) rather than inline javascript: URLs.

Example (CSS + small JS — works without jQuery and gives a smooth transition):

/* CSS */
.toggle-panel { overflow: hidden; max-height: 0; transition: max-height 220ms ease; }
.toggle-panel.open { max-height: 800px; }

/* JS */
document.addEventListener('click', function(e){
  const btn = e.target.closest('.toggle-trigger');
  if(!btn) return;
  const panel = document.getElementById(btn.dataset.target);
  const expanded = btn.getAttribute('aria-expanded') === 'true';
  btn.setAttribute('aria-expanded', String(!expanded));
  panel.classList.toggle('open');
});

Practical tips: use real <button> elements for triggers (better keyboard handling), avoid inline JS, ensure each panel has a unique ID, set aria-controls on the trigger, and keep server-side output visible by default so users without JS don’t lose content. If you still prefer jQuery for animation, attach a delegated click handler to .toggle-trigger that reads data-target, updates aria-expanded, and animates the panel — the delegation pattern scales well for multiple toggles.

Recommended Answers

All 5 Replies

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.