I want to change the class of my closest div after pressing a button. Let me make it more clear by showing some code. I have the following HTML:
<div class="wrapper">
<div class="title">
<div class="aa">-</div>
<div class="ab">-</div>
<div class="ac">-</div>
<div class="navigation">
Test link
</div>
</div>
<div class="content not_active">
<p>
Text
</p>
</div>
</div>
With the following CSS:
.active{
display:block;
}
.not_active{
display:none;
}
Now my goal is to find the closest div that has the class: .not_active and change that class after pressing on the hyperlink with class: navigation.
I tried it with jQuery with the following code:
$(function () {
$('.navigatie a').click(function () {
$(this).parent().parent().find('.not_active').toggleClass('active');
});
});
but with no succes. What I am doing wrong?
JSFIDDLE DEMO
It is because you are using .navigatie class instead of .navigation.
Here the JSFiddle.
Related
I’m trying to build an accordion menu and for some reason I can’t get the accordion to function how I want.
Currently when the user clicks on the accordion div, the hidden-textarea div gets added with an active-accordion class wherever it's referenced.
How do I get the active-accordion class to only be added to the current clicked accordion div? Not all of them. I need to be able to toggle between each accordion div that is clicked.
Any help is gladly appreciated.
Thanks!
HTML
<div class="accordion-block">
<div class="container">
<div class="gallery-wrap">
<div class="item-accordion">
<div class="accordion">
<div class="title text accordion-title”>Title of Accordion</div>
<div class="animation-container">
<div class="hidden-textarea active-accordion”>
<div class="body text”>Lorem Ipsum </div>
<div class="buttonArrayV1”>Click Me</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="accordion-block">
<div class="container">
<div class="gallery-wrap">
<div class="item-accordion">
<div class="roles-description accordion">
<div class="title text accordion-title”>Title of Accordion</div>
<div class="animation-container">
<div class="hidden-textarea active-accordion">
<div class="body text”>Lorem Ipsum </div>
<div class="buttonArrayV1”>Click Me</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.active-accordion {
display: block !important;
}
.hidden-textarea {
display: none;
}
JS
TestJs.HorizontalAccordion.prototype.onResize = function() {
$(window).resize(function() {
if ($(window).width() < 1200) {
$('.accordion').on( "click", function(e) {
e.preventDefault();
e.stopPropagation();
$(".hidden-textarea").addClass("active-accordion");
// $('.hidden-textarea').removeClass("active-accordion");
// $('.hidden-textarea').toggle("active-accordion");
return false;
});
}
if ($(window).width() >= 1200) {
}
});
};
Update: I updated the onclick function and am able to toggle successfully. Now I just need to open 1 accordion not all of them.
Any help is gladly appreciated. Thank you.
$('.horizontalAccordionV1 .accordion').on( "click", function() {
event.preventDefault();
// create accordion variables
var accordion = $('.hidden-textarea');
// toggle accordion link open class
accordion.toggleClass("active-accordion");
// toggle accordion content
accordionContent.slideToggle(250);
});
Problem solved! Added this to my JS click function and removed everything else.
$(this).find('.hidden-textarea').toggleClass('active-accordion');
I have a html code which has two div parents inside it with class "main" and "chat". There is another div in first parent with class="menu"
When user clicks on menu, it will add "open" class to the div. Now i want to hide "chat" when menu is open.
And i know this if i want to select a class, it must be inside of that div. Is there any solution (with css or js) to select another div which is outside of that class?
And i don't have access to html code of "chat" section because it's loading from a third-party website.
Here is my HTML code:
<body>
<div class="main">
<div class="menu">
by click it will add "open" to the "menu" class
</div>
</div>
<div class="chat">
</div>
</body>
and this is what i want to do (but i know that doesn't work in this way):
.menu.open .chat {display:none;}
Thanks.
$(".menu").on("click", function() {
$(".menu").addClass("open");
$(".chat").hide();
});
.open {
background: pink
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="main">
<div class="menu">
by click it will add "open" to the "menu" class
</div>
</div>
<div class="chat">
Chat Div
</div>
</body>
Try this code sample:
JS:
function Open(){
document.getElementsByClassName("menu")[0].classList.add("open");
document.getElementsByClassName("chat")[0].style.display = "none";
}
HTML:
<body>
<div class="main">
<div class="menu" onclick="Open()">
by click it will add "open" to the "menu" class
</div>
</div>
<div class="chat"></div>
</body>
You can use toggle() and toggleClass() in click event
$(".menu").on("click", function() {
$(".menu").toggleClass("open");
$(".chat").toggle()
});
.open{
color:blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="main">
<div class="menu">
by click it will add "open" to the "menu" class
</div>
</div>
<div class="chat">
Chat Div
</div>
</body>
You can achieve this if you add a class to main as well (or only main, and not menu). Suppose you decide to add class menu-opened to main. Now you should be able to achieve desired results using the css code:
.main.menu-opened~.chat {display:none;}
The ~ is used to select every .chat element proceeded by .main.menu-opened element.
Here is the solution:
Vanilla JS: (https://codepen.io/cssjs/pen/EMMPjV)
var btnMenu = document.querySelector('.menu')
var boxChat = document.querySelector('.chat')
btnMenu.onclick = handleMenu
function handleMenu(e) {
e.preventDefault()
e.stopPropagation()
if (!btnMenu.classList.contains('open')) {
btnMenu.classList.add('open')
boxChat.classList.add('open')
} else {
btnMenu.classList.remove('open')
boxChat.classList.remove('open')
}
}
jQuery: (https://codepen.io/cssjs/pen/eXXZEG)
var btnMenu = $('.menu')
var boxChat = $('.chat')
$(btnMenu).on('click', function() {
$(btnMenu).toggleClass('open')
$(boxChat).toggleClass('open')
})
HTML:
<body>
<div class='main'>
<a href="#menu" title="Menu" class='menu'>Menu</a>
</div>
<div class='chat'>
<div>Some chat content.</div>
</div>
</body>
CSS:
.chat {
display: none
}
.menu.open {
color: red;
font-weight: bold;
}
.chat.open {
display: block
}
Hope it helps. :)
Here is the Working code as you want..But I have added "open" class on main in-spite of menu.
jQuery(document).ready(function($) {
$('.menu').on('click', function(){
$('.main').toggleClass('open');
})
});
.main.open + .chat{
display: none;
}
<div class="main">
<div class="menu">
by click it will add "open" to the "menu" class
</div>
</div>
<div class="chat">
chat data
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I just want to add class for the button after another class but it's inside of another div. Take a look at this example.
<div class="wrap">
<button class="one">Click</button>
<button class="two">Click</button>
</div>
<div class="bottom"></div>
.add-me{
color:red;
}
In here, I want to add to class button one. But it needs to be applied when bottom class appears.(This is a validation message. So I can't style directly to button one.)
I tried with this way. But it only apply for wrapper div.
$('.bottom').prev('div').first().addClass('add-me');
Here is the fiddle: https://jsfiddle.net/eqhj0vm9/2/
You have to use $('.bottom').prev().find(':first-child').addClass('add-me'); to select the prev element's first child.
$(function() {
$(".activate").click(function(){
$('.bottom').show();
$('.bottom').prev().find(':first-child').addClass('add-me');
});
});
.add-me {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<button class="one">Click</button>
<button class="two">Click</button>
</div>
<div class="bottom" style="display:none"> BOTTOM CLASS </div>
<br />
<button class="activate">Activate bottom class</button>
I have a problem : I use classes on a div for simplicity, I would like to show a hidden div after a click, but only on that div, the problem is it shows on all divs, and I can't seem to get it working, here is a jsfiddle with the problem : http://jsfiddle.net/cWNvT/
HTML:
<div class="left">
Edit
<div class="edit">
<p>edit here</p>
</div>
</div>
<div class="left">
Edit
<div class="edit">
<p>edit here</p>
</div>
</div>
<div class="left">
Edit
<div class="edit">
<p>edit here</p>
</div>
</div>
JavaScript:
$(document).ready(function() {
$('.edit').hide();
$('.left a.edit-click').click(function() {
$('.left').children().show();
});
});
Anyone have a solution for this ?
Try this working fiddle.
$(document).ready(function() {
$('.edit').hide();
$('.left a.edit-click').click(function(){
$(this).parent().children().show();
});
});
All I have done is use $(this).parent() instead of using your $(".left") selector.
Try finding the parent of the clicked element only, and using its children:
http://jsfiddle.net/cWNvT/1/
$(document).ready(function() {
$('.edit').hide();
$('.left a.edit-click').click(function(){
$(this).closest(".left").children().show();
});
});
$(".left") selects all elements with class .left in the document. $(this).closest(".left") finds the first parent of the clicked link that has class .left.
Change your code to this:
$('.left a.edit-click').click(function(){
$(this).next('.edit').show();
});
http://jsfiddle.net/cWNvT/3/
<div id="wrapper">
<div class="accordionButton">Personal Information</div>
<div class="accordionContent">
Personal text
</div>
<div class="accordionButton">Experience</div>
<div class="accordionContent">
Experience information
</div>
<div class="accordionButton">Training</div>
<div class="accordionContent">
No skills
<div class="accordionButton">Career</div>
<div class="accordionContent">
Never had a job
</div>
<div class="accordionButton">Referers</div>
<div class="accordionContent">
None.
</div>
</div>
This code works how i want it to. It is a horizontal accordion. However, when it is loaded on my webpage, they content divs have to be hidden for my jquery to work.
Jquery:
$(document).ready(function() {
// When div is clicked, hidden content divs will slide out
$('div.accordionButton').click(function() {
$('div.accordionContent').slideUp('normal');
$(this).next().slideDown('normal');
});
// Close all divs on load page
$("div.accordionContent").hide();
});
If i don't hide the divs, all the divs display. Is there any way to display the 1st page without changing too much of my jquery or would i have to set different class names for the button and the content so that when a specified button is clicked, the affiliated content will slide out for that button div?
You can use jquery selector for first div and set it as show(). Something like :
$('div.accordionContent:first').show();
I think you have to try this:-
<script type="text/javascript">
$.fn.accordion = function(settings) {
accordion = $(this);
}
$(document).ready(function($) {
$('div.accordionContent').click(function() {
if($(this).next().is(":visible")) {
$(this).next().slideDown();
}
$('div.accordionContent').filter(':visible').slideUp();
$(this).next().slideDown();
return false;
});
});
</script>
Why not use slideToggle() instead of IF statements....
Try this very simple solution
HTML
<div class="accordion-container">
<div class="accordion-content">
<div class="accordion-title">Title</div>
<div class="accordion-toggle">Toggle content</div>
</div>
<div class="accordion-content">
<div class="accordion-title">Title</div>
<div class="accordion-toggle">Toggle content</div>
</div>
<div class="accordion-content">
<div class="accordion-title">Title</div>
<div class="accordion-toggle">Toggle content</div>
</div>
</div>
jQuery
$('.accordion-content .accordion-title').on('click', function(){
$(this).toggleClass('active');
$('.accordion-title').not($(this)).removeClass('active');
$(this).next().slideToggle();
$(".accordion-toggle").not($(this).next()).slideUp();
});