10 examples of 'angular 6 show hide div on click' in JavaScript

152
function ngShow() {
153
	if (scope.ngShow === true) {
154
		doShow();
155
	} else if (scope.ngShow === false) {
156
		doHide();
157
	}
158
	$ionicScrollDelegate.resize();
159
}

115
function ShowHide (divName, show)
116
{
117
	var div = document.getElementById (divName);
118
	if (show) {
119
		div.style.display = 'block';
120
	} else {
121
		div.style.display = 'none';
122
	}
123
}

307
function showHideDiv(div_id) {
308
    var div_button = $("");
309
    div_button.attr('title', 'Click to show/hide more information');
310
    div_button.attr('id', 'button-'+div_id);
311
    div_button.attr('onclick', 'toggleDiv("'+div_id+'")');
312
    div_button.addClass("btn btn-default btn-xs btn-study");
313
    div_button.html('<span></span>');
314
315
    return div_button;
316
}

70
toggleShow() {
71
  if (this.html1) {
72
    this.html1.entity.show = !this.html1.entity.show;
73
    this.layer.update(this.html1.entity, this.html1.id);
74
  }
75
}

276
function show_div() {
277
	$(event.target).next().toggle();
278
}

161
function ngHide() {
162
	if (scope.ngHide === true) {
163
		doHide();
164
	} else if (scope.ngHide === false) {
165
		doShow();
166
	}
167
	$ionicScrollDelegate.resize();
168
}

145
function show_hide(id) {
146
    jQuery('#' + id).toggle();
147
}

158
function hideDiv(div) {
159
  var pdiv = "#" + div,
160
      button = pdiv + "-toggle"
161
162
  if ($(pdiv).css('display') == 'none') {
163
    $(pdiv).toggle('slow');
164
    $(button).html('Hide');
165
  }
166
  else {
167
    $(pdiv).toggle('slow');
168
    $(button).html('Show');
169
  }
170
}

206
function toggleDiv(divId) {
207
    $("#" + divId).toggle();
208
    var imgsrc = $(".img" + divId).attr('src');
209
    if (imgsrc == 'images/plus.png') {
210
        $(".img" + divId).attr("src", function () {
211
            return "images/minus.png";
212
        });
213
214
    }
215
    else {
216
        $(".img" + divId).attr("src", function () {
217
            return "images/plus.png";
218
        });
219
    }
220
}

109
public show(): void {
110
  if (!this.isExpanded) {
111
    this.collapsing = true;
112
    this.showBsCollapse.emit();
113
    this.isCollapse = false;
114
    this.isCollapsing = true;
115
116
    this.isExpanded = true;
117
    this.isCollapsed = false;
118
119
    const container = this._el.nativeElement;
120
121
    container.classList.remove('collapse');
122
    container.classList.add('collapsing');
123
124
    setTimeout(() => {
125
      this._renderer.setElementStyle(container, 'height', this.maxHeight + 'px');
126
    }, 10);
127
128
    setTimeout(() => {
129
      container.classList.remove('collapsing');
130
      container.classList.add('collapse');
131
      container.classList.add('show');
132
      this.shownBsCollapse.emit();
133
      this.collapsing = false;
134
    }, this.animationTime - (this.animationTime * 0.5));
135
    this.expanded.emit(this);
136
  }
137
}