10 examples of 'javascript toggle class onclick' in JavaScript

1
function onClickToggleElement() {
2
    var $el = $(this),
3
        $showTarget = $($el.data('show')),
4
        $hideTarget = $($el.data('hide')),
5
        timeout = $el.data('timeout') || 0;
6
7
    setTimeout(
8
        function toggleHiddenClass() {
9
            $showTarget.removeClass('hidden');
10
            $hideTarget.addClass('hidden');
11
        },
12
        timeout
13
    );
14
}

10
function toggle(toggleId)
11
{
12
    var toggle = document.getElementById ? document.getElementById(toggleId) : document.all[toggleId];
13
    toggle.textContent = toggle.innerHTML == '\u25b6' ? '\u25bc' : '\u25b6';
14
}

8
function toggle(_btn, _div) {
9
	var elem = document.getElementById(_div);
10
	
11
	if(elem.style.display === 'none') {
12
		elem.style.display = 'block'
13
		_btn.innerHTML = "-";
14
	}
15
	else {
16
		elem.style.display = 'none'
17
		_btn.innerHTML = "+";
18
	}
19
}

1
function toggle(id)
2
{
3
    var icon = document.getElementById('toggle-' + id);
4
    if (icon != null)
5
    {
6
        var childElement = document.getElementById(id);
7
        if (icon.src.indexOf('Plus.gif') != -1)
8
        {
9
            icon.src = icon.src.replace('Plus.gif', 'Minus.gif');
10
            if (childElement != null)
11
            {
12
                childElement.style.display = "block";
13
            }
14
        }
15
        else
16
        {
17
            icon.src = icon.src.replace('Minus.gif', 'Plus.gif');
18
            if (childElement != null)
19
            {
20
                childElement.style.display = "none";
21
            }
22
        }
23
    }
24
}

45
function toggle() {
46
	var list = document.getElementsByClassName("gwt-TextArea");
47
	var button = document.getElementById("hide-console");
48
	var console = list[0];
49
	if (console.style.display == "block") {
50
		console.style.display = "none";
51
		console.scrollTop = 99999;
52
		button.innerHTML = "show console";
53
	} else {
54
		console.style.display = "block";
55
		console.scrollTop = 99999;
56
		button.innerHTML = "hide console";
57
	}
58
}

1029
function toggle(id, $link) {
1030
  $node = document.getElementById(id);
1031
  if (!$node)
1032
  return;
1033
  if (!$node.style.display || $node.style.display == 'none') {
1034
  $node.style.display = 'block';
1035
  $link.innerHTML = 'Hide source ≢';
1036
  } else {
1037
  $node.style.display = 'none';
1038
  $link.innerHTML = 'Show source ≡';
1039
  }
1040
}

10
toggle() {
11
  this.element.find('.toggle-content').toggleClass('is-visible');
12
}

25
static toggle () {
26
    const $container = $(this).closest('.js-toggle-container');
27
    const $content = $container.find('.js-toggle-content');
28
    if ($content.hasClass('display-none')) {
29
        ToggleElement.show($container);
30
    } else {
31
        ToggleElement.hide($container);
32
    }
33
}

8
function toggle(div_id) {
9
    var el = document.getElementById(div_id);
10
    if (el != null) {
11
        if (el.style.display == 'none') { el.style.display = 'block'; }
12
        else { el.style.display = 'none'; }
13
    }
14
}

46
function toggle (event:any) {
47
  // ignore the event if a key different from ENTER was pressed.
48
  if (event.type === 'keypress' && event.which !== 13) {
49
    return false;
50
  }
51
52
  const target = $(event.target);
53
  const targetList = target.closest('ul.-with-hierarchy > li');
54
  targetList.toggleClass('-hierarchy-collapsed -hierarchy-expanded');
55
  return false;
56
}