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>
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 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 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.
The thing is that I want middle1 to be displayed as default, as u see from the code block.
So the problem is now I have duplicated text, I mean it works but everytime I change text in one block I have to copy it and paste it in another it is so irritating.
What I have to add or remove ?
Thx in advance.
HTML:
<div class="middle">
<div id="middle1">
<p>text1</p>
</div>
<div id="middle2">
<p>text2</p>
</div>
<div id="middle3">
<p>text2</p>
</div>
<div class="middle_display" id="question">
<p>text1</p>
</div>
</div>
css:
.middle{
background-image:url(Images/struktura/midd_midd_border.jpg);
background-repeat:repeat-y;
height:auto;
float:left;
width:682px;
margin:0 0 0 0;
}
#middle1, #middle2, #middle3 {display: none;}
Jquery:
<script type="text/javascript">
$(document).ready(function() {
$('.question1').click(function(){
$('.middle_display').html($('#middle1').html());
})
$('.question2').click(function(){
$('.middle_display').html($('#middle2').html());
})
$('.question3').click(function(){
$('.middle_display').html($('#middle3').html());
})
});//end of ready
</script>
You want middle1's contents to be displayed as default? Insert this line:
$('.middle_display').html($('#middle1').html());
right below "$(document).ready..."
Okay, so this is the example HTML.
<a href="http://www.google.com/">
<div id="link">
This is a link
</div>
</a>
<div class="example">
Example div 1
</div>
<div class="example">
Example div 2
</div>
<div class="example">
Example div 3
</div>
Whenever #link is clicked, all the divs with the class .example are hidden.
$("#link").click(function ( event ) {
$(".example").hide();
});
or
$("#link").click(function ( event ) {
$(".example").fadeOut("fast");
});
Now whenever any spot on the page is clicked, all of the .example divs return.
Is it possible? It doesn't all necessarily have to be done with jQuery.Thanks in advance.
$('body').live('click', function() {
$(".example").show();
});