CODEWITHSUNDEEP
javascripthtmlcss
AminVtn
AminVtn

Reputation: 1

Select a div using another class

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.

Upvotes: 0

Views: 202

Answers (6)

Vikas Patel
Vikas Patel

Reputation: 261

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>

Upvotes: 0

Nemanja
Nemanja

Reputation: 594

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. :)

Upvotes: 0

Kushagr Arora
Kushagr Arora

Reputation: 2128

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.

Upvotes: 0

Maheer Ali
Maheer Ali

Reputation: 36594

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>

Upvotes: 0

Adnan Toky
Adnan Toky

Reputation: 1943

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>

Upvotes: 0

Aishwarya
Aishwarya

Reputation: 645

$(".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>

Upvotes: 2

Related Questions