I have the below as an example of what I'm working on; I'm trying to add a class to two elements when one of the elements is clicked.
<div id="main">
<div id="section1">
- contents here -
</div>
<div id="section2">
- contents here -
</div>
<div id="section3">
- contents here -
</div>
<div class="plans-group">
<div class="plans-columns plans-type-1">
<div class="plans-col plans-left plans-heading">Heading</div>
<div class="plans-col plans-right">
<div class="select-plan select-gold">Gold</div>
</div>
<!-- end plans-right -->
</div>
<!-- end plans-columns -->
<div class="plans-columns plans-type-2">
<div class="plans-col plans-left plans-heading">Heading</div>
<div class="plans-col plans-right">
<div class="select-plan select-silver">Silver</div>
</div>
<!-- end plans-right -->
</div>
<!-- end plans-columns -->
<div class="plans-columns plans-type-3">
<div class="plans-col plans-left plans-heading">Heading</div>
<div class="plans-col plans-right">
<div class="select-plan select-bronze">Bronze</div>
</div>
<!-- end plans-right -->
</div>
<!-- end plans-columns -->
</div>
<!-- end plans-group -->
</div>
<!-- end main -->
#1): DIV with class "select-plan"
When div with class "select-plan" is clicked, add class "clicked" to that div. When it's clicked again, remove the added class.
#2): DIV with id "main"
When "select-plan" is clicked (as explained above) also add class to the container div with id "main". And remove the added class when "select-plan" is clicked again.
This is where I have a problem because different classes have to be added to "main". For example:
When "select-gold" is clicked, add class "gold-selected" to "main"
When "select-silver" is clicked, add class "silver-selected" to "main"
When "select-bronze" is clicked, add class "bronze-selected" to "main"
I don't want previously clicked div to have its added class removed because another div is clicked. The added class should only be removed when that same div is clicked for the second time and so on...
Also, I might have up to 8 or more plans. The solution should not be limited to the 3 plans (Gold, Silver, and Bronze). I should have the ability to create more plans.
I really appreciate everyone's help with this.
Thanks in advance.
let selectPlan = document.querySelectorAll('.select-plan');
let mainDiv = document.getElementById('main');
selectPlan.forEach(el =>{
el.addEventListener('click',function(e){
if(e.target.classList.contains('select-plan')){
e.target.classList.toggle('clicked');
}
if(e.target.classList.contains('select-gold')){
mainDiv.classList.add('gold-selected');
mainDiv.classList.remove('silver-selected');
mainDiv.classList.remove('bronze-selected');
}else if(e.target.classList.contains('select-silver')){
mainDiv.classList.add('silver-selected');
mainDiv.classList.remove('gold-selected');
mainDiv.classList.remove('bronze-selected');
}else{
mainDiv.classList.add('bronze-selected');
mainDiv.classList.remove('silver-selected');
mainDiv.classList.remove('gold-selected');
}
});
});
let main = document.getElementById("main");
let select = document.querySelector(".select-plan");
let selectG = document.getElementsByName("gold");
let selectS = document.getElementsByName("silver");
let selectB = document.getElementsByName("bronze");
function toggleGold() {
if (main.classList.contains('gold-select')) {
main.classList.remove('gold-select');
} else {
main.classList.add('gold-select');
}
selectG[0].classList.toggle('cliqué')
}
//You can add same function for silver and bronze
document.querySelector(".select-gold").addEventListener("click", toggleGold);
document.querySelector(".select-silver").addEventListener("click", toggleSilver);
document.querySelector(".select-bronze").addEventListener("click", toggleBronze)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div name="gold" class="select-plan select-gold">Gold</div>
<div name="silver" class="select-plan select-silver">Silver</div>
<div name="bronze" class="select-plan select-bronze">Bronze</div>
Related
In my bootstrap website I added fullpage.js, so when a dynamically one class want to add to the page. But two dynamic class added on same element at same time.
So it changed the functionality.
One class only add to the element.
I tried but didn't worked.
Can you please help me to solve this problem.
This is my code, in this code(fp-tableCell) class added two times
<section class="icon-section fp-section fp-table active" id="section-1">
<div class="fp-tableCell" style="height:600px;">
<div class="fp-tableCell" style="height:600px;">
<div class="container">
<div class="row">
<div class="col-md-9 col-sm-12 col-xs-12">
<img src="images/product-1.png" alt="img" class="max-width">
</div>
<div class="col-md-5 col-sm-12 col-xs-12 banner-txt">
<h3 class="preHeading"">volant</h3>
<h1 class="mainHeading">an icon for iconoclasts</h1>
<p class="description">Our singular purpose was to create a product not<br>
bound by convention.
Volant is the realization of that<br> dream.</p>
</div>
</div>
</div>
</div>
</div>
</section>
The code that generates the two <div> elements appears to have been minified and is therefore very difficult to interpret. I think the easiest way to solve this problem would be to remove the duplicate <div> elements from all of the <section> elements after the document has loaded. To do this, you can insert the following code just before your closing </body> tag:
<script>
var sectionElems = document.getElementsByTagName("section"); //creates an array containing all <section> elements
var outerDiv;
var innerDiv;
//loop through each <section> element found and remove duplicate <div> element
for(var i = 0; i < sectionElems.length; i++){
outerDiv = sectionElems[i].children[0];
innerDiv = outerDiv.children[0];
//check class names to make sure it is a duplicate element
if(outerDiv.className == innerDiv.className){
outerDiv.innerHTML = innerDiv.innerHTML;
}
}
</script>
This code loops through each <section> element and writes the content of the nested <div> element into the parent <div> element, basically overwriting itself without including the nested <div> element.
Basically I want one section to be shown at first as the home page. When I click on a link, I want that section to be shown, but everything else hidden, and so on. Every time I click a link, I only want the clicked on link's section to be shown.
I am close, but stuck. Here is my HTML:
About Me
Contact
<div class="container-fluid">
<div class="container about showing">
<h2>About Me</h2>
</div>
</div>
<div class="container-fluid">
<div class="container about showing">
<h2>Contact</h2>
</div>
</div>
And here is my script:
$(document).ready(function() {
$('.about').hide();
$('.contact').hide();
$('.showing').show();
$('#contact').on('click', function(e) {
e.preventDefault();
$('div').removeClass('showing');
$('.contact').addClass('showing');
if ($('div').hasClass('showing')) {
$('div').show();
} else {
$('div').hide();
}
});
});
So it shows the 'About Me' section right away and everything else is hidden. When I click the 'Contact' link it removes the 'showing' class from all my 'div's and adds the 'showing' class to my contact section. I then check to see if the 'div' has the 'showing' class, if it does I have it show the 'div' otherwise I want it to hide it.
However, when I click on the Contact link, it does show the Contact section, but it does not hide the About Me section. I know this is a long post, I am just trying to make sure I explain everything correctly. Any help is greatly appreciated!
I would strongly suggest you use data fields and common classes to make it generic.
var $pages = $('.container');
$('.menu').on('click', function(e){
//remove showing from all containers
$pages.removeClass('showing');
//put it on the container with the matching class of the data target
$pages.filter('.'+ $(e.target).data('target')).addClass('showing');
});
.container {
display: none;
}
.container.showing {
display: unset;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
About Me
Contact
Other
<div class="container-fluid">
<div class="container home showing">
<h2>Home</h2>
</div>
</div>
<div class="container-fluid">
<div class="container about">
<h2>About Me</h2>
</div>
</div>
<div class="container-fluid">
<div class="container contact">
<h2>Contact</h2>
</div>
</div>
<div class="container-fluid">
<div class="container other">
<h2>Other</h2>
</div>
</div>
Here's a few things you can optimize:
$(document).ready(function() {
$('.about, .contact').hide(); //put both of them in single selector
$('.showing').show(); //this shows the only element that has "showing
$('#contact, #about').on('click', function(e) {
e.preventDefault();
var self = $(this); //reference to the object being clicked
var target = $("." + self.attr('id'));
//removes "showing" class from all others and hides them
$(".container").not(target).removeClass("showing").hide();
//adds "showing" class to the new current item
target.addClass("showing").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
About Me
Contact
<div class="container-fluid">
<div class="container about showing">
<h2>About Me</h2>
</div>
</div>
<div class="container-fluid">
<div class="container contact"> <!--you don't want that "showing" class here!-->
<h2>Contact</h2>
</div>
</div>
How to hide the div "whole" when click on #clickit so that my setting page content won't show and .user page will show in ui-view
setting html page
<!-- page content -->
<div class="whole">
<div class="page-title">
<div class="title_left">
<h3>Settings</h3>
</div>
<div class="clearfix"></div>
<div class="row" id="clickit"> // <-- Click to hide "whole" class
<div class="col-md-12 col-sm-12 col-xs-12">
<a ui-sref=".user">Users & practitioners</a>
</div>
</div>
</div>
</div>
<div ui-view> // I HAVE TO SHOW THIS DIV AND HIDE SETTING DIV
</div>
<!-- /page content -->
I don't want a jquery solution.. all i need a angular of pure javascript solution
<div class="whole" ng-hide="hideWhole> // <-- assign a scope var dependency
<div class="page-title">
<div class="title_left">
<h3>Settings</h3>
</div>
<div class="clearfix"></div>
<div class="row" id="clickit" ng-click="hideWhole=1"> // <-- update scope var
Ideally you'll use a controller variable (ctrl.hideWhole in controllerAs syntax) so you can update the display of the element from elsewhere in the app.
Here is a JavaScript solution to your problem, attaching a function to the onclick event of your element which sets the css display attribute to none.
<div class="row" id="clickit" onclick="hideWhole()">
function hideWhole() {
var wholeDiv = document.getElementsByClassName(".whole");
wholeDiv.style.display = 'none';
}
i've a problem to toggle only (this) 1 'card'
$('a[rel="toggle_comments"]').click(function(){
var div = $('.comments');
$(div, this).slideToggle('slow');
});
<!-- This is a example code -->
<section>
<div class="mainclass">
[...]
<div class="select">
Test
</div>
</div>
<ul class="comments">
<!-- Content -->
</ul>
</section>
<section>
<div class="mainclass">
[...]
<div class="select">
Test
</div>
</div>
<ul class="comments">
<!-- Content -->
</ul>
</section>
[...]
When I clicked at 'toggle_comments', toggle all '.comments' classes, not only that, I have clicked. Anyone have any ideas?
Sorry for my bad english.
I hope you understand what I mean - Thanks :-)
If you want to toggle only the .comments under the <section> tag your link is in, do this:
$('a[rel="toggle_comments"]').click(function(){
// find the closest section tag (parent) and find all child `.comments`
var $comments = $(this).closest('section').find('.comments');
$comments.slideToggle('slow');
});
If you want to toggle all .comments:
$('a[rel="toggle_comments"]').click(function(){
$('.comments').slideToggle('slow');
});
I have few comments in my code, like this:
<!-- DebugDataTemplateBegin {"template":"one"} -->
<div class="row notices" id="admin">
comment One content
</div>
<!-- DebugDataTemplateEnd {"template":"one"} -->
<!-- DebugDataTemplateBegin {"template":"two"} -->
<div class="row notices" id="admin">
comment Two content
</div>
<!-- DebugDataTemplateEnd {"template":"two"} -->
and I have anchors like this:
one <br/>
two
These links content corresponds to the comments 'template' element, what I want to achieve is that when the user hover over any of these links it's correspondence content (between the comment) will be highlighted.
I started a simple jsfiddle example http://jsfiddle.net/Banzay/md79aaby/ , but not sure if this is even possible.
Sorry if I didn't explain this very well.
Youssef
Cleaned up my answer above and removed it.
You might have to change the parent you are looking for comments in. And the regex could use some love but this is the general idea.
HTML:
<!-- DebugDataTemplateBegin {"template":"one"} -->
<div class="row notices" id="admin">comment One content</div>
<!-- DebugDataTemplateEnd {"template":"one"} -->
<!-- DebugDataTemplateBegin {"template":"two"} -->
<div class="row notices" id="admin">comment Two content</div>
<!-- DebugDataTemplateEnd {"template":"two"} -->
one
<br/>
two
JS:
var getComment = function (templateName) {
return $("body").contents().filter(function () {
return this.nodeType == 8 && this.nodeValue.match(RegExp('DebugDataTemplateBegin.*'+templateName));
})
}
$('a').hover(function () {
var templateName = this.href.split('#')[1];
var comment = getComment(templateName);
var element = $(comment).next();
element.toggleClass('highlight');
})
http://jsfiddle.net/md79aaby/18/