I want to toggle visibility of multiple divs using knockout. Below is the rough idea of my problem -
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
<div> Div 1 </div>
<div> Div 2 </div>
<div> Div 3 </div>
By default, 'Div 1' should be visible.
When I click individual buttons it should display only the related divs based on the buttons clicked.
I have gone through the Knockout live examples but not getting how to do this efficiently.
Please help!
The following will do a job for you. It's not ideal, but should give you a platform to work on.
First, everything in Knockout is tied to a view model. You want to be able to control the visibility of 3 divs, so here's a view model which might suit. Like I said, not perfect :)
var buttonVm = new function(){
var self = this;
// Flags for visibility
// Set first to true to cover your "first should be open" req
self.button1Visible = ko.observable(true);
self.button2Visible = ko.observable(false);
self.button3Visible = ko.observable(false);
self.toggle1 = function(){
self.button1Visible(!self.button1Visible());
}
self.toggle2 = function(){
self.button2Visible(!self.button2Visible());
}
self.toggle3 = function(){
self.button3Visible(!self.button3Visible());
}
}
You'll need to change your markup to:-
<!-- events here. When clicked call the referenced function -->
<button type="button" data-bind="click: toggle1">Button 1</button>
<button type="button" data-bind="click: toggle2">Button 2</button>
<button type="button" data-bind="click: toggle3">Button 3</button>
<!-- Visibility set here -->
<div data-bind="visible: button1Visible"> Div 1 </div>
<div data-bind="visible: button2Visible"> Div 2 </div>
<div data-bind="visible: button3Visible"> Div 3 </div>
Couple of things to note here. First, I've added the type attribute. Without it, the default behaviour of the button will be to try and submit your form.
Tying it all up:-
// Create view model
var vm = new buttonVm();
ko.applyBindings(vm);
Related
I'm currently utilizing .closest in vanilla js to find a div(modal container) with a certain class, then on click of the button closes that div(modal container). all works fine, but the issue i'm running into now is I need to find either one of two divs(two different types of modals). So depending which one of these "div (modal containers)" are closest to the button - close that modal.
<div class="modal-a">
<div class="modal__header">
<button class="btn" data-close-btn>close</button>
</div>
</div>
<div class="modal-b">
<button class="btn" data-close-btn>close</button>
</div>
//-------------- Javacript
const closeBtn = querySelectorAll(['data-close-btn]);
closeBtn.forEach(button => {
const modal = button.closest('.modal-a'); // works as expected
button.addEventListener('click', (e)=> closeModal(modal));
});
function closeModal(modal) {
modal.classList.remove('.active');
}
what im trying to achieve
const modal = button.closest('.modal-a') || button.closest('.modal-b');
const modal = button.closest('.modal-a, .modal-b');
both these obviously fails the first time but works thereafter although in the console there is always a failure on click, so how do i write this to only use the relevant selector?
Hope this makes sense what im trying to explain.
You can use a single eventlistener and event delegation for that:
document.addEventListener("click", e => {
target = e.target.closest(".modal-a, .modal-b")
if(!target || !e.target.matches("[data-close-btn]")) return;
alert("You clicked a modal-Button")
})
<div class="modal-a">
<button class="btn" data-close-btn>close</button>
</div>
<div class="modal-b">
<button class="btn" data-close-btn>close</button>
</div>
<h2>Button outside of any Modal</h2>
<button class="btn" data-close-btn>close</button>
I am new to front-end. Now, Here I have 3 divs which will be on the same page.and the position will also be same. it is like toggling .
So at the start this will be the div that I will show
<div text-angular id="htmlEditorId" >Abc</div>
then there is button whick is like
<button class="col-xs-3 btn btn-default" ng-click="changeTab()">NextTab </button>
On click of that button
<div text-angular id="secon">abcd</div>
this div should be shown and not the previous one.
And on again click of that button a third div
<div text-angular id="third">azzzbcd</div>
this should be seen and again on click first one should show . Its like a round robin fashion .
Now what I tried is using ng-show and ng-if. Can any one help me with this?
$scope.changeTab = function() {
$scope.showfirst = true;
$scope.showsecond = false;
}
It's quite simple, you can do it in many ways, for example:
In the controller
Define a scoped variable (bindable with the front-end)
$scope.showView = "firstView"
Define also a function:
$scope.changeView = function(value) {
$scope.showView = value;
}
In the html page define your divs and button
<button ng-click="changeView('secondView')">Chage View</button>
<div ng-show="showView == 'firstView'">abcd</div>
<div ng-show="showView == 'secondView'">abcd</div>
I am trying to figure something out. I have 10 buttons. A button looks like the following but with different classes
<button id="1" class="btn active"></button>
Now each of these buttons are in an area. I have defined these areas like so
var areaOne = [1, 2];
var areaTwo = [3, 4, 5];
var areaThree = [6, 7, 9];
var areaFour = [8, 10];
Now I could do most of what I need too, but I want to do it efficiently.
Each area should only have one button with the class active.
All other buttons should have the classes inactive and throb.
If an inactive button is clicked, inactive and throb should be removed and an active class added. However, the original active button within this buttons area then needs to become inactive and have the class throb.
At the moment I have the following
$(".btn").click( function(){
if ($( this ).hasClass("inactive")) {
$( this ).removeClass("inactive");
$( this ).removeClass("throb");
$( this ).addClass("active");
}
});
So that will make an inactive class active. I don't know if this is the best way to do this or if it can be cleaner? What I am not too sure of now is making the active class in the clicked buttons area inactive. I can get the clicked buttons id, but then I need to somehow loop the buttons within this area to find the original active one and make it inactive.
How would I achieve something like this?
Thanks
I have created a multidimensional array instead of defining them in seprate variables.
var arr = [[1,2],[3,4,5],[6,7,9],[8,10]];
$(".btn").click(function(){
// Fetch the clicked id
var _id = +this.id;
// Fetch the are of the button
var _others = arr.filter(function(v,i){
return v.indexOf(_id)!=-1
});
console.log("#"+_others[0].join(", #"));
// Make a string of others like #1, #2 and exclude this and remove class active and add classes inactive and throb
$("#"+_others[0].join(", #")).removeClass("active").addClass("inactive throb");
// Add class active to clicked button and remove class inactive and throb
$(this).removeClass("inactive throb").addClass("active");
});
.active{background:#ff0000;}
.inactive{background:#00ff00;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button class="btn" id="1">Buttone 1</button>
<button class="btn" id="2">Buttone 2</button>
<button class="btn" id="3">Buttone 3</button>
<button class="btn" id="4">Buttone 4</button>
<button class="btn" id="5">Buttone 5</button>
<button class="btn" id="6">Buttone 6</button>
<button class="btn" id="7">Buttone 7</button>
<button class="btn" id="8">Buttone 8</button>
<button class="btn" id="9">Buttone 9</button>
<button class="btn" id="10">Buttone 10</button>
The thing is you do not need to check befire using removeClass("whatever"), if it exists it will get removed otherwise won't give any error.
I have a list of Items with different button with them. Plunker
Quick View:
I want something like if I click on any of the buttons, related text will be copy to the div above. Also if I click on the button again it will removed from the Div.Same for each of the buttons. [I added manually one to show how it may display ]
I am not sure how to do that in Angular. Any help will be my life saver.
<div ng-repeat="item in csTagGrp">
<ul>
<li ng-repeat="value in item.csTags">
<div class="pull-left">
<button type="button" ng-class='{active: value.active && !value.old}' class="btn btn-default btn-xs">{{value.keys}}</button>
<span>=</span>
</div>
<div class="pull-left cs-tag-item-list">
<span>{{value.tags}}</span>
</div>
</li>
</ul>
</div>
The simplest thing would be to use $scope.tags object to store selected tags and add/remove them with the scope method similar to this:
$scope.tags = {};
$scope.toggleTag = function(tag) {
if (!$scope.tags[tag]) {
$scope.tags[tag] = true;
}
else {
delete $scope.tags[tag];
}
};
Demo: http://plnkr.co/edit/FrifyCrl0yP0T8l8XO4K?p=info
You can use ng-click to put in your scope the selected value, and then display this value instead of "Win".
http://plnkr.co/edit/IzwZFtRBfSiEcHGicc9l?p=preview
<div class="myboard">
<span>{{selected.tags}}</span>
</div>
...
<button type="button" ng-click="select(value)">{{value.keys}}</button>
I have a slew of buttons in different levels within a nested JQuery accordion. This is functioning kind of like a phone book, and when buttons are clicked, numbers are added to a communication tool.
I was hoping to put a button at the top of each sublevel in the accordion that would add all of the rest of the buttons within that sublevel to the "To:" field. I imagine there is an elegant way to do what I would otherwise be accomplishing by brute force in an ugly manner. Thanks!
<div id="accordion-nest">
<h3>First group</h3>
<div>
<button id="allGroupOne">Add all of Group One</button> <-----Button I want
<button id="Guy1">Biff 555-1111</button>
<button id="Guy2">Tagg 555-1112</button>
<button id="Guy3">Mitt 555-1113</button>
......
</div>
<h3>Second group</h3>
<div>
<button id="Guy13">Jeb 555-2222</button>
</div>
<h3>Third group</h3>
<div>
<button id="Guy33">Uncle Jesse 555-99999</button>
</div>
</div>
JS/JQuery
$('button').click(function () {
var last8 = (this.textContent).slice(-8);
if (pageNames == '') {
pageNames = (this.textContent).slice(0, -8);
} else {
pageNames = pageNames + " " + (this.textContent).slice(0, -8);
}
if ($('#pageTo').val() != '') {
$('#pageTo').val($('#pageTo').val()+', '+ areaCode + last8);
} else {
$('#pageTo').val(areaCode+last8);
}
}
I'd add the same class to all the 'Add All' buttons:
<button class="allGroup">Add all of Group One</button>
And would also add the same class to all the other phone buttons:
<button class="phone" id="Guy1">Biff 555-1111</button>
Also, add a class to the divs that contains each group, like this:
<div class="groupContainer">
Then, this would be the jquery when clicking an 'Add all' button:
$(".allGroupOne").click(function(){
var $parent = $(this).closest('.groupContainer'); //The parent div
$parent.find(".phone").trigger('click'); //This simulates each button click
});
That's it!
Cheers