hide/show div using id property with index in javascript - 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

Related

When click on button, show divs with checked checkbox using JQuery

I want to use JQuery on my Coldfusion application for showing/hiding div elements with checkbox checked/unchecked within the div.
Basically, in a view I show multiple divs elements, every div have also more divs inside, one of these internal divs contains an input type checkbox that could come checked or unchecked.
I also have three buttons in that view 'Active, Inactive, All'. When clicking on Active I want to show all div elements with checkbox checked, not showing the unchecked, and the other way around when clicking on Inactive.
<div class="btn-group ">
<button id="actives" type="button">Actives</button>
<button id="inactives" type="button">Inactives</button>
<button id="all" type="button">All</button>
</div>
<div id="apiDiv">
<cfloop array="#apis#" index="api">
<div class="card card-found">
<div class="card-header">
<cfif Len(api.iconClass)>
<i class="fa fa-fw #api.iconClass#"></i>
</cfif>
#structKeyExists( api, "name" ) ? api.name : api.id#
</div>
<div class="card-body">
<p>#api.description#</p>
</div>
<div class="card-button">
<input class="#inputClass# ace ace-switch ace-switch-3" name="#inputName#" id="#inputId#-#api.id#" type="checkbox" value="#HtmlEditFormat( api.id )#"<cfif ListFindNoCase( value, api.id )> checked="checked"</cfif> tabindex="#getNextTabIndex()#">
<span class="lbl"></span>
</div>
</div>
</cfloop>
</div>
I´m not an expert at all with JQuery. The only thing I have done is what follows and I do not know whether if is a good beggining or not:
$("#actives").click(function (e) {
$("#apiDiv .card").filter(function() {
<!--- code here --->
});
});
Someone please that can help me with it? Thanks a lot in advance!
After your CF code executes, it will generate a .card for each loop iteration of your apis array. So you jQuery code will need a click handler for the #actives button and that will loop through each() iteration of the checkboxes to determine the checked/unchecked state. At that point find the closest() ancestor .card and show()/hide() the .card depending upon the checkbox state.
$("#actives").click(function (e) {
$('input[type=checkbox]').each(function() {
if (this.checked) {
$(this).closest(".card").show();
} else {
$(this).closest(".card").hide();
}
});
});
If you want to do it with jQuery code:
$('#actives').click(function(){
$('#apiDiv').show();
});
Working Fiddle
The code you are probably looking for is in these event handlers for your buttons:
function activesHandler() {
jQuery(".card-button > input:checked").parents(".card.card-found").show();
jQuery(".card-button > input:not(:checked)").parents(".card.card-found").hide();
}
function inactivesHandler() {
jQuery(".card-button > input:checked").parents(".card.card-found").hide();
jQuery(".card-button > input:not(:checked)").parents(".card.card-found").show();
}
function allHandler() {
jQuery(".card.card-found").show();
}
jQuery("#actives").click(activesHandler);
jQuery("#inactives").click(inactivesHandler);
jQuery("#all").click(allHandler);
I reproduced some of your ColdFusion by replacing it with JavaScript and provided a demonstration of the above event handlers in this JSFiddle.
Call the checkbox by its id and when it's checked, write a function to display the divs you want to display:
<input type="checkbox" id="check">
$document.getElementById("check").onclick = function(){
$document.getElementById("div_name").style.display="block"; // block displays the div.
}

Window scroll by only working on one element

I am wondering if someone can help me alter this code so that it resets or works with multiple elements?
On the website below I have this script set up to scroll right by 100vw Using the window.scrollBy(window.innerWidth /1, 0); when the purple box is hovered over.
however I would like it to work with multiple instances and can't seem to get it to work. Is anyone able to help me?
here is my script;
let button = document.getElementById("mybutton");
button.addEventListener("mouseover", () => {
window.scrollBy(window.innerWidth /1, 0);
});
and her is the url: https://ba-site-build.webflow.io/builds/dev-1-hover-slider.
i would really appreciate if anyone can offer any help so much!
Thankyou :)
The problem is that id of elements must be unique, So you can use class instead and in the script loop over elements and add event listener for all of them.
HTML:
<div class="horizontal">
<div class="red">
<div class="scrollThis button">
<div class="purple"></div>
</div>
</div>
<div class="red">
<div class="scrollThis button">
<div class="purple"></div>
</div>
</div>
<div class="yellow"></div>
</div>
JS:
let buttons = document.getElementsByClassName("scrollThis");
for (let item of buttons) {
item.addEventListener("mouseover", () => {
window.scrollBy(window.innerWidth /1, 0); // <-- you can change this amount if you need more than 120px
});
}
I hope this helps 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'))
}
}

Assign dynamic controller in ng-repeat

I am new to Angularjs. I've tried a example in here.
file index.html:
<div ng-repeat="data in ctl.dataList">
<div class="col-md-6">
<textarea type="text" ng-mouseover="ctl.mouseOverFunc()" ng-mouseleave="ctl.mouseLeaveFunc()">{{data.value}}</textarea>
<button ng-show="ctl.showCloseBtn">X</button>
</div>
</div>
file app.js:
app.controller('FocusController', function() {
this.showCloseBtn = false;
this.dataList = [{
value: "one"
}, {
value: "two"
}];
this.mouseOverFunc = function() {
this.showCloseBtn = true;
};
this.mouseLeaveFunc = function() {
this.showCloseBtn = false;
};
});
I want to show close button when mouse overed every textarea like facebook chat in this picture. But my issues is when mouse over one of textarea then all X button was showed.
How do i assign dynamic controller to every textarea or how to do like facebook chat ?
Thanks for your help
You can do with CSS as well as AngularJS. I suggest you to do with CSS which is Simple. And Do your ng-click on the button.
This Plunker Demo is using with CSS and added ng-click there. Please check the styles and classes added.
Styles
<style>
.field:hover .btn-close {
display:block;
}
.btn-close {
display:none;
}
</style>
HTML
<div ng-repeat="data in ctl.dataList">
<div class="col-md-7 field">
<textarea></textarea>
<button ng-click="doSomething()" class="btn-close">X</button>
</div>
</div>
This Plunker Demo is with AngilarJS as explained in the other answer by New Dev.
<div ng-repeat="data in ctl.dataList">
<div ng-mouseover="data.showX = true"
ng-mouseleave="data.showX = false">
<textarea></textarea>
<button ng-click="doSomething()" ng-show="data.showX">X</button>
</div>
Typically, it would be best to create a directive for this functionality and encapsulate all the logic of clicking the "x" button, but for simplicity you could also leverage the child scope created by ng-repeat, and do the following:
<div ng-repeat="data in ctl.dataList">
<div ng-mouseover="data.showX = true"
ng-mouseleave="data.showX = false">
<textarea type="text"></textarea>
<button ng-show="data.showX" ng-click="ctl.close(data)">X</button>
</div>
</div>
ng-repeat="item in items" creates a child scope for each item, so you can set values on the child scope.
Here's your modified plunker
EDIT:
As suggested in the comments, if you have nothing more complex than showing or hiding the button, definitely CSS approach is the simplest way to go. Use the above example then as an illustration for how scopes work.

Why isnt my Jquery background image switching?

Heres my Jquery
$(".sectiontitle").click(function (e) {
$(this).next('div').slideToggle("slow");
el = $(this).find(".toggler > a.toggle");
currBg = el.css('background-image');
if (currBg == "url(http://blah/resources/img/close.gif)") {
currBg = "url(http://blah/resources/img/open.gif)";
console.log('open gif');
}
else {
currBg = "url(http://blah/resources/img/close.gif);"
console.log('close gif');
}
console.log(currBg);
el.css('background-image', currBg);
return false;
});
Heres my HTML panel (of which there are many)
<div class="majorsection">
<div class="sectiontitle">
<h2>Restaurant Bookings</h2>
<div class="toggler">
<a title="click to hide" class="toggle" href="http://blah/index.php/console/index"><span>-</span></a>
</div>
<div class="clear"></div>
</div>
<div class="msectioninner">
<div class="minorsection">
<div class="sectionlist">
<div class="section"></div>
</div>
<div class="sectionoptions">
<div class="clear"></div>
</div>
</div>
</div>
</div>
The image switches on the first click and the panel slides all cool both ways but the image doesn't change back
Why not use two css classes instead.
It will make the code much cleaner and maintainable.
Failing that one thing to try is to change
.css('background-image', currBg)
to
.css('backgroundImage', currBg)
I remember there was an issue with this (but thought it had been fixed). If this does not work have you got a url showing the issue?
Have you tried console.log(currBg); right after you retrieve it? The url() property may be getting rewritten/resolved. Not sure - but a similar problem arises if you are testing the .attr('src') of an image - it might not be what you set it to anymore.
A suggestion though: Rather than hard coding the background-image values, consider doing something like:
$(document).ready(function(){
$('a.toggle').addClass('closed');
$(".sectiontitle").click(function(e){
$(this).next('div').slideToggle("slow");
el = $(this).find(".toggler > a.toggle");
// jQuery 1.3 has this:
// el.toggleClass('.closed');
// otherwise - use this:
if (el.is('.closed'))
{
el.removeClass('closed');
} else {
el.addClass('closed');
}
return false;
});
});
Then your a.toggle picks up the background-image property of the "open" and a.toggle.closed gets the "closed" image in your CSS files.

Categories

Resources