Develop Reference

How to use Jquery to change div css/scss on a dropdown menu?

I am a jquery beginner. I'm trying to make a dropdown menu where when the user clicks one of the buttons it will link to its correct section. Before a user clicks a button, all sections must be hidden (display: none), but when an option is selected from the dropdown, I want to use js/jquery to trigger a css change in the section div to appear (display: block). Pretty lost and I can't seem to get the jquery to work, any help would be greatly appreciated!
Thank you!
$(document).ready(function() {
$('#departments a').on('click',function()) {
$(this).css({'display','block'});
});
}
article.apply {
padding-bottom: 6rem;
}
article.apply p {
margin-bottom: 4rem;
}
article.apply div.math {
display: none;
}
article.apply div.cmsc {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown">
<a id= "selectedDept" class="dropbtn button button-red
caret"> Search </a>
<div id = "departments" class="dropdown-content">
<a class= "dept" href="#math">MATH</a>
<a class= "dept" href="#cmsc">CMSC</a>
</div>
</div>
<article class="apply">
<div class=“math”>
<h2> Hello World </h2>
</div>
<div class=“cmsc”>
<h2> Hello World! </h2>
</div>
</article>

As you can see with the console on your snippet code your Javascript was very wrong:
You forgot to close the last ) (of the ready() function)
You close the function .on() before the {} of the callback
You update the css with {'display','block'} instead of {'display': 'block'}
$(document).ready(function() {
$('#departments a').on('click', function() {
$(this).css({'display':'block'});
});
});
article.apply {
padding-bottom: 6rem;
}
article.apply p {
margin-bottom: 4rem;
}
article.apply div.math {
display: none;
}
article.apply div.cmsc {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown">
<a id= "selectedDept" class="dropbtn button button-red caret"> Search </a>
<div id = "departments" class="dropdown-content">
<a class= "dept" href="#math">MATH</a>
<a class= "dept" href="#cmsc">CMSC</a>
</div>
</div>
<article class="apply">
<div class=“math”>
<h2> Hello World </h2>
</div>
<div class=“cmsc”>
<h2> Hello World! </h2>
</div>
</article>

Apply CSS class on hover to other element

I've this HTML structure:
<div class="container">
<div class="list-wrapper">
<ul>
<li class="item-first">
</li>
</ul>
</div>
<div class="description-wrapper">
<div class="description-first"></div>
</div>
</div>
So is it possible to set the .description-first to opacity: 1; when hovering .item-first? Or is this just possible with JS? Thanks for your help!

As Strebler said, this is only possible with Javascript.
function MouseOver(value) {
document.getElementsByClassName("description-first")[0].setAttribute("style", "opacity: " + value + ";");
}
.description-first {
opacity:0;
}
<div class="container">
<div class="list-wrapper">
<ul>
<li onmouseover="MouseOver('1');" onmouseout="MouseOver('0');" class="item-first">hover here
</li>
</ul>
</div>
<div class="description-wrapper">
<div class="description-first">to make this appear</div>
</div>
</div>

Not possible. The closest you will get in css is using the .list-wrapper on hover like this:
.list-wrapper:hover + .description-wrapper > .description-first {
opacity: 1;
}
But that's not what you want I guess. :)

This is my solution. With my solution I can add a class depending on the index.
jQuery("li").hover(function () {
jQuery(".description-wrapper").children().eq(jQuery(this).index()).toggleClass("description-visible");
});
.description-wrapper div {
opacity: 0;
}
.description-visible {
opacity: 1 !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="list-wrapper">
<ul>
<li class="item-first">First</li>
<li class="item-second">Second</li>
<li class="item-third">Third</li>
</ul>
</div>
<div class="description-wrapper">
<div class="description-first">First</div>
<div class="description-second">Second</div>
<div class="description-third">Third</div>
</div>
</div>

HTML, Javascript: How to share a container under specified bootstrap panels

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<div class="container-fluid">
<div id="header">
<div>
</div>
<div id="content">
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class = "nav-tabs">A</li>
<li class = "nav-tabs">B</li>
<li class = "nav-tabs">C</li>
</ul>
<div id="my-tab-content" class="tab-content">
<div class="tab-pane" id="a">
<div class="panel-body">A content</div>
</div>
<div class="tab-pane" id="b">
<div class="panel-body">B content</div>
</div>
<div class="tab-pane" id="c">
<div class="panel-body">C content</div>
</div>
</div>
</div>
<br>
<div class="row" id="container"> image </div>
</body>
This is the HTML code, I have a three column panel showing A, B and C using bootstrap.
Underneath the content, there is a container with id = "container" at the bottom of all panels.
Here is my question:
I want to only have id = "container" shown under panel A, B. However, I don't want the panel C showing id = "container" . Is there any way to realize this?

You can use Hide()
<script src="scripts/jquery-1.10.2.js"></script>
<script>
$(document).ready(function () {
$("#c").hide();
})
</script>

Try this using jQuery:
$("#c").hasClass("active") {
$("#container").hide()
} else {
$("#container").show()
}
Or if you prefer a more CSS method:
$("#c").hasClass("active") {
$("#container").css("visibility", "hidden")
} else {
$("#container").css("visibility", "visible")
}

First add the class for the all '''li''' items
class = "nav-tabs"
Second, we need to add '''$(document).ready(function()''' to refresh the page, thus the "class" will be updated
$(".nav-tabs").on( "click", function() {
$(document).ready(function() {
bindClick();
})
});
function bindClick(){
if ( $("#c").hasClass("active")){
$("#container").hide()
} else {
$("#container").show();
}
}

Not able to click img inside hyperlinked div

I am trying to show a dropdown when the gear-img div is clicked using jQuery but since it's wrapped inside an a tag, it ends up redirecting me to the url and I also want the whole div clickable. Please suggest a fix or a better way to achieve this.
<a href="http://www.google.com">
<div class="content">
<div class="gear-img"><img src="images/ic-settings-black-24-px.svg"></div>
<div class="dropdown"></div>
</div>
</a>

You could stop propagating the event onto the parent a tag :
$(".gear-img").click( function(event){
//you toggling code here....
event.preventDefault();
event.stopPropagation();
});
Add you clickable behaviour differently for every different-behaving div.

An element that is inline elements should not contain block elements.
Change code like this:
$(document).ready(function(){
$('.gear-img').click(function(){
$('.dropdown').toggle();
})
})
.dropdown {
display: none;
}
img {
width: 50px;
cursor: pointer;
margin-top:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
redirect to google
<div class="content">
<div class="gear-img"><img title="Show dropdown" src="http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg"></div>
<div class="dropdown">Dropdown</div>

Because just adding an anchor (a link) doesnt make it work as you intend. It now does exactly what you told it to do; When you click it, it goes to Google.
You can drop the anchor add a little jQuery:
<div class="content">
<div class="gear-img"><img src="images/ic-settings-black-24-px.svg"></div>
<div class="dropdown"> A<br/> B<br/> B<br/> </div>
</div>
and then you can use a little code to toggle the list:
$('.content').on('click', '.gear-img', function(){
$(this).find('.dropdown').slideToggle();
})

try this one:
$(function(){
$('.gear-img img').on('click',function(e){
e.stopPropagation()
$('.dropdown ul li').toggle('show');
console.log('Image Clicked!');
});
$('a').on('click',function(e){
e.stopPropagation()
$('.gear-img img').click()
return false;
});
});
.show{
display:block;
}
.dropdown ul li{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="http://www.google.com">
Click Here!
<div class="content">
<div class="gear-img"><img src="https://indianflag.co.in/wp-content/uploads/2016/12/2.j"></div>
<div class="dropdown">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
</a>

You can just do this.
Initially, keep your dropdown div display none.
On click of that image div, we can show the dropdown div.Please find the code and let me know if you need further help.
<a href="http://www.google.com">
</a>
<div class="content">
<div class="gear-img" onclick="fun()"><img src="images/ic-settings-black-24-px.svg">
</div>
<div id="dropdown" class="dropdown" style="display:none">
</div>
</div>
<script>
function fun()
{
var x=document.getElementById("dropdown");
x.style.display="block";
}
</script>

How do I make a text visible on the right side of a div onclick?

I am creating a FAQ page where I need to put all my questions on the left side of the div. When I click on the questions, the respective answer for the question should be visible on the right side of the div, on the same page. I have tried many different things, but I'm still not able to do it.
Also, how can I make only the answer to the respective question visible?
Thanks in advance.

Using JQuery,
HTML:
<div> <-- For each question -->
<div style="float: left;" onclick="showAnswer(this);">Question</div>
<div style="float: right; display: none;">Answer</div>
</div>
Javascript:
function showAnswer(cntrl)
{
$(cntrl).next().toggle();
}

check this out
HTML
<table>
<tr><td class="question">question1?</td><td class="answer">answer1</td></tr>
<tr><td class="question">question2?</td><td class="answer">answer2</td></tr>
<tr><td class="question">question3?</td><td class="answer">answer3</td></tr>
<tr><td class="question">question4?</td><td class="answer">answer4</td></tr>
<tr></tr>
</table>
SCRIPT
$(document).ready(function () {
$(".answer").hide();
$(".question").click(function () {
$(".answer").hide();
$(this).parent().children(".answer").show();
});
});

You could also store the ID of the answer in the Tag attribute, and then simply when clicked get the tag, and show the corresponding element.
<script>
$(document).ready(function() {
$('#answers div').hide();
$('#questions ul li').click(function() {
var answer = $(this).attr('tag');
$('#' + answer).show();
});
});
</script>
<div id="questions" style="float: left;">
<ul>
<li tag="answer1">Question 1</li>
<li tag="answer2">Question 2</li>
<li tag="answer3">Question 3</li>
<li tag="answer4">Question 4</li>
</ul>
</div>
<div id="answers" style="float: right;">
<div id="answer1">This is answer 1</div>
<div id="answer2">This is answer 2</div>
<div id="answer3">This is answer 3</div>
<div id="answer4">This is answer 4</div>
</div>

Simple JS:
function showDiv(id) {
for (var i=1;i<=4;i++)
{
document.getElementById('div'+i).style.display = 'none';
}
document.getElementById('div'+id).style.display = 'block';
}
html:
<div class="qaContainer" style="width:400px;">
<div class="leftContainer" style="float:left;">
Question 1<br />
Question 2<br />
Question 3<br />
Question 4<br />
</div>
<div class="rightContainer" style="float:right;">
<div id="div1" style="display:block;">Answer1</div>
<div id="div2" style="display:none;">Answer2</div>
<div id="div3" style="display:none;">Answer3</div>
<div id="div4" style="display:none;">Answer4</div>
</div>
</div>

So assuming you have questions on left side and answers on right side You HTML should look like this
<div id="questions">
<ul>
<li data-qnum="1"></li>
...
<li data-qnum="N"></li>
</ul>
</div>
<div id="answers">
<ul>
<li data-ansnum="1"></li>
...
<li data-ansnum="N"></li>
</ul>
</div>
And CSS should be something like this
#questions,#answers{
float:left;
}
.specialClass{
color:red;
}
Now jquery should be something like this:
$(document).ready(function(){
//hide all answers
$("#answers").find("li").hide();
//and then add click handler on questions
$("#questions").on("click","li",function(e){
// preventdefault prevents any default action so that you may replace li with a or any other tag
e.preventDefault();
// you may also add any special formatting on the question clicked like making it red
$("#questions").find("li").removeClass('specialClass');
$(this).addClass('specialClass');
var qnum = $(this).data('qnum');
//hide all shown answers
$("#answers").find("li").hide().each(function(){
// show the correct answer
var anum =$(this).data('ansnum');
if(anum==qnum)
{$(this).toggle(); } });
});
Also see this fiddle http://jsfiddle.net/s4HEh/1/
PS: Also note that this jquery uses proper event delegation syntax and does not uses Id on question so that you may use your id for something more important

Try this .. just a simple way of doing it
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style type="text/css">
#left
{
width:50%;
background-color:Yellow;
float:left;
}
#right
{
width:50%;
background-color:Red;
float:right;
}
.answers
{
display:none;
}
</style>
<script src="../JS/jQuery.js" type="text/javascript"></script>
<script type="text/javascript">
function showAnswer(ans) {
$(".answers").hide();
$("#" + ans).toggle();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="left">
<ul id="questions">
<li onclick="showAnswer('ans1')">q1</li>
<li onclick="showAnswer('ans2')">q2</li>
</ul>
</div>
<div id="right">
right
<ul id="answers">
<li id="ans1" class="answers">Answer1</li>
<li id="ans2" class="answers">Answer2</li>
</ul>
</div>
</div>
</form>
</body>
</html>
Let me know if this helped. or if you have any queries.