Develop Reference

hide/show div using id property with index in javascript

Here Iam facing issue with toggling the div containers. if I click on video button, other divs should close, only if open. because of toggling, if it close already, its opening on click of particular btn.can you help me?
html:
<div class="row" *ngFor="let doctor of doctordata;let i=index">
<button appointmentToggle(doctor,'video',i)">video</button>
<button appointmentToggle(doctor,'clinic',i)">In-clinic</button>
<div class="row" id="clinicShow{{i}}">
<button (click)="clinicdetails(i)">clinicName</button>
</div>
<div class="col-lg-12 col-sm-12" id="videoappointmentShow{{i}}">
videocalendertimeslot
<div>
<div class="col-lg-12 col-sm-12" id="inclinicappointmentShow{{i}}">
Incliniccalendertimeslot
<div>
</div>
component.ts
index: any;
appointmentToggle(doctor,type,index){
if(type == 'video'){
$("#appointmentShow"+index).toggle();
//here i need to check condition whether its already opened or not, if open, then it should toggle.
$("#clinicShow"+index).toggle();
}
if(type == 'clinic'){
if(this.index==undefined){
$("#clinicShow"+index).toggle();
$("#appointmentShow"+index).toggle();
this.index=index;
}else if(this.index == index){
$("#clinicShow"+index).toggle();
$("#appointmentShow"+index).toggle();
index = undefined;
}else{
$("#clinicShow"+this.index).toggle();
$("#clinicShow"+index).toggle();
$("#appointmentShow"+index).toggle();
this.index= index;
}
}
clinicdetails(index){
$("#clinicShow"+index).toggle();
$("#appointmentShow"+index).toggle();
}

There are going to be a lot of ways to do this. I'd probably create an array of boolean values to show/hide stuff.
<div class="row" *ngFor="let doctor of doctordata;let i=index">
<button appointmentToggle(doctor,'video',i)">video</button>
<button appointmentToggle(doctor,'clinic',i)">In-clinic</button>
<div class="row" *ngIf="hideVideo[i]">
<button (click)="clinicdetails(i)">clinicName</button>
</div>
<div class="col-lg-12 col-sm-12" *ngIf="hideVideo[i]">
videocalendertimeslot
<div>
<div class="col-lg-12 col-sm-12" *ngIf="hideClinic[i]">
Incliniccalendertimeslot
<div>
</div>
Then you're Component file can have a boolean array:
hideVideo: boolean[] = [];
hideClinic: boolean[] = []
Whenever doctordata is initialized also initialize the array:
doctordata.forEach(() => { this.hideVideo.push(false);this.hideClinic.push(false); });
You're appointment toggle can be something like this:
appointmentToggle(doctor,type,index){
if(type == 'video'){
this.hideVideo[index] = !this.hideVideo[index];
this.hideClinic[index] = !this.hideClinic[index];
}
}
clinicdetails(index){
this.hideVideo[index] = !this.hideVideo[index];
this.hideClinic[index] = !this.hideClinic[index];
}
This is incredibly rough and untested.
Edit: Here is working code. This version is less rough and untested:
https://stackblitz.com/edit/angular-ivy-xtz8xv?file=src%2Fapp%2Fapp.component.ts
I used the same concept that I used above. However, I think the code would be more ideal if you could introspect your doctordata objects to determine if it should be displayed or not instead of keeping a second array. However, there is also a good argument about not letting display specific logic clutter up your data model objects.

It looks like your logic would be simpler if you use show() and hide() instead.
Especially because hiding a hidden element is okay and has no effect...
Look at: jQuery Effects - Hide and Show
If the first thing you do is hiding the old index (if any) you only need to show the new...

In the jquery when showing a div and hiding it. I think you don't need an if ... Else condition
Try this code:
$(".btn).click(function(){
$("div").toggle();
});
Once that .btn is click div will show and if u want to hide it just click the button again
I also try to combine javascript and jquery before but it didn't work out well.
<script src = "https://code.jquery.com/jquery-3.6.0.min.js"></script>
Just add this to your header and you are good to go and it's much easy? Hope this works for you

this.$ or this.$$ to select all elements with same id or class name - Polymer

I have 3 paper-toggle-buttons that I would like to have disabled until I click an "edit" button (makes sense to do that).
I have cobbled this together in a long-winded form, however I wanted to know if there was a way in PolymerJS that you could use either the this.$.ID-NAME or the this.$$('CLASS-NAME') to select all of the paper-toggle-buttons, assuming that I gave them all the same ID and CLASS names (bad practise to duplicate ID's I know).
Any help is appreciated. I know that it's currently working, but I just want to know if there's an easier way.
I am currently working with the following (the toggle will occur when clicking a button with on-click event "editMode"):
HTML
<div class="detail info horizontal layout">
<div class="bodyHeaderText flex">Active User</div>
<paper-toggle-button class="toggle" id="toggle" checked$="{{isActive}}" disabled></paper-toggle-button>
</div>
<div class="detail info horizontal layout">
<div class="bodyHeaderText flex">Operator</div>
<paper-toggle-button class="toggle" id="toggle" checked$="{{isOperator}}" disabled></paper-toggle-button>
</div>
<div class="detail info horizontal layout">
<div class="bodyHeaderText flex">Manager</div>
<paper-toggle-button class="toggle" id="toggle" checked$="{{isManager}}" disabled></paper-toggle-button>
</div>
PolymerJS
editMode : function() {
toggle1 = this.$.toggle1;
toggle2 = this.$.toggle2;
toggle3 = this.$.toggle3;
if( EditDiv.style['display'] == 'none' )
{
toggle1.toggleAttribute('disabled');
toggle2.toggleAttribute('disabled');
toggle3.toggleAttribute('disabled');
}
else
{
toggle1.toggleAttribute('disabled');
toggle2.toggleAttribute('disabled');
toggle3.toggleAttribute('disabled');
}
}

You could take a look to Polymer DOM API, there're a lof of functions to interact with the DOM. I think you're looking for Polymer.dom(this.root).querySelectorAll('.toggle')

$$ returns the first node in the local DOM that matches selector.
you can do
Array
.from(Polymer.dom(this.root).querySelectorAll('.foo'))
.forEach($0 => /* do something */)
;
Then, just a note, your snippet doesn't make much sense because you are performing the same operation in if and else statements:
if(expression) {
toggle1.toggleAttribute('disabled')
} else {
toggle1.toggleAttribute('disabled')
}
// is equal to:
toggle1.toggleAttribute('disabled')
your code could definitely look like:
{
editMode() {
return [
this.$.toggle1,
this.$.toggle2,
this.$.toggle3
]
.forEach($0 => $0.toggleAttribute('disabled'))
}
}

Script not working in subsequent modals

I've got help with a script that works in the first modal but doesn't in any of the next couple. When you scroll down, the background color changes in the first modal but nothing happens in the second and so forth.
https://jsfiddle.net/qhrmtass/10/
var scrollFn = function () {
var targetOffset = $("#anchor-point")[0].offsetTop;
console.log('Scrolling...');
if ($('.remodal').scrollTop() > targetOffset) {
$(".projectTitle").addClass("topper");
} else {
$(".projectTitle").removeClass("topper");
}
};
$('.remodal').scroll(scrollFn);

Specification says UNIQUE
HTML 4.01 specification says ID must be document-wide unique.
HTML 5 specification says the same thing but in other words. It says that ID must be unique in its home subtree which is basically the document if we read the definition of it.
First for the best practice you have to change duplicate id anchor-point (in my example i change it to class) also for the id one should be unique.
Secondly you have to use $(this) inside your scroll function scrollFn to detect the current scrolling remodal and to select the elements that belong to it.
HTML :
<a class="project-link" href="#modal1" id="one" style="margin-right:25px;">Modurra Shelving </a>
<div class="remodal" data-remodal-id="modal1">
<div class="dar">Darrien Tu.</div>
<button class="remodal-close" data-remodal-action="close"></button>
<div class="anchor-point">sdfsfs</div>
<div class="title">
<p class="projectTitle">Modurra
<br>Shelving.</p>
</div>
</div> <a class="project-link" href="#modal2" id="one" style="margin-right:25px;">Other stuff </a>
<div class="remodal" data-remodal-id="modal2">
<div class="dar">Darrien Tu.</div>
<button class="remodal-close" data-remodal-action="close"></button>
<div class="anchor-point">sdfsfs</div>
<div class="title">
<p class="projectTitle">Modurra
<br>Shelving.</p>
</div>
</div>
Js :
var scrollFn = function () {
var targetOffset = $(this).find(".anchor-point")[0].offsetTop;
console.log('Scrolling...');
if ($(this).scrollTop() > targetOffset) {
$(this).find(".projectTitle").addClass("topper");
} else {
$(this).find(".projectTitle").removeClass("topper");
}
};
$('.remodal').scroll(scrollFn);
Hope this could help, take a look at Working fiddle

How to get DIV ID on click

I am new to javascript and couldnt find answer online (I feel like its out there since this seems pretty simple thing, I might not be using the right search terms though)
I am working with the code in this jfiddle:
http://jsfiddle.net/ApoG/f7qqq6k2/4/
$('.item').click(function(){
if( document.getElementById("one").style.display != "none") {
document.getElementById("one").style.display = "none";
} else {
document.getElementById("one").style.display = "block";}
var $this = $(this),
tileStyle = $this.hasClass('big') ? { width: 50, height: 50} : { width: 170, height: 110};
$this.toggleClass('big');
$this.find('.item-content').stop().animate( tileStyle );
$container.isotope( 'reLayout' )
});
When you click a div, it takes the 'item' class and changes its properties.
My goal is to have image or one type of text in a widget when its small and another text or image when its expanded on click. I am going to achieve that by changing div custom properties when its clicked using an if statement in my javascript. (right now testing with changes to display)
My questions is...since 'item' class is selected on click, how can I get the DIV ID on click? (right now I hard coded div id)
Thank you.

With JQuery:
$('div').click(function(){
alert(this.id);
});
JSFiddle Demo, with your full code
With Pure JS:
var div = document.getElementsByTagName("div");
for(var i=0; i<div.length; i++){
div[i].onclick = function(){
alert(this.id);
}
}
JSFiddle Demo

Thank you for the toggle tip. I used that to make my code work and show different things in the box depending on the click of the div.
Here is what I ended up doing:
https://jsfiddle.net/ApoG/z3x6hqLe/
<script>
function toggleText1() {
$('#one_one').toggle();
$('#one_two').toggle();
}
function toggleText2() {
$('#two_one').toggle();
$('#two_two').toggle();
}
</script>
<div id="container">
<div class="item">
<div id=one style=display:"none" class="item-content" onclick="toggleText1()">
<div id=one_one class="text" >Show More</div>
<div id=one_two class="text" style="display:none">Show Less</div>
</div>
</div>
<div class="item">
<div id=two style=display:"none" class="item-content" onclick="toggleText2()">
<div id=two_one class="text" >Show More</div>
<div id=two_two class="text" style="display:none">Show Less</div>
</div>
</div>
<div class="item">
<div id=three style=display:"none" class="item-content"></div>
</div>
</div>
I am definitely sure there is a more optimal way to define all the toggle but as I mentioned earlier I am a complete newb so hopefully with more tinkering I will figure that one out.

How do I make this code work for each click?

I have h3 block's and on click of each of the block I am showing the section associated with it. It is actually something like accordion(hide and collapse). I have also given a drop icon to the h3 tags, means that when the block is opened the h3 should have a dropicon pointing downwards while others h3 should have there dropocons towards right. I am controlling this behaviour using backgroundPosition. I am using the jQuery visible condition to see if the particular block is visible then give its drop icon one background position and to the rest other. It works fine but only for first click. It doesn't work for second click; can somebody explain why? Here is my code:
if($(this).next().is(':visible')) {
$(this).css({'backgroundPosition':'0px 14px'});
}
else {
$("h3").css({'backgroundPosition':'0px -11px'});
}
UPDATED CODE:
$("h3").click(function() {
$(".tabs").hide();
$(this).next().show();
if($(this).next().is(':visible')) {
$(this).css({'backgroundPosition':'0px 14px'});
} else {
$("h3").css({'backgroundPosition':'0px -11px'});
}
})

If you wrap the whole block in a div it might make traversing easier.
Html:
<div class="drop-block">
<h3>Click this</h3>
<ul>
<li>Drop</li>
<li>it</li>
<li>like</li>
<li>it's</li>
<li>hot</li>
</ul>
</div>​
Jquery:
var dropper = $('.drop-block');
$(dropper).find('h3').click(function(){
$(this).toggleClass('active');
$(dropper).find('ul').toggle();
});​
Example

I Belive that you are looking for live
So it will be something like this:
$(element).live('click', function(){
if($(this).next().is(':visible')) {
$(this).css({'backgroundPosition':'0px 14px'});
}
else {
$("h3").css({'backgroundPosition':'0px -11px'});
}
}

Instead of editing the css of them, make a css class "open" (or similar), and then add / remove the class on the click to open / close.
It is much easier to debug by checking for the existence of a class than it is to check the css properties of something in JS.

Better make a class name for each situation and easly handle the action
$('h3').on('click', function(){
if($(this).hasClass('opened')) {
$(this).removeClass('opened');
}
else {
$(this).addClass('opened');
}
}

$(document).on('click', 'h3', function(e) {
$(".tabs").hide('slow');
$(this).css({'backgroundPosition':'0px 14px'});
if(!$(this).next().is(':visible'))
{
$("h3").css({'backgroundPosition':'0px -11px'});
$(this).next().show('slow');
}
});
You can remove 'slow' from show/hide if animation is not required
Here is an example.

It sounds like you need to bind click events to the h3 elements and toggle the visibility of the child elements:
$(function(){
$("h3").click(function(){
$(this).next(".tabs").toggle();
});
});
Example markup:
<h3>Item 1</h3>
<div class="tabs">
<h4>Option 1</h4>
<h4>Option 2</h4>
</div>
<h3>Item 2</h3>
<div class="tabs">
<h4>Option 1</h4>
<h4>Option 2</h4>
</div>
Here's a jsFiddle to demonstrate.