Using jQuery "this" plus a CSS selector? - javascript

I am writing a script to show/hide a section within a div. I have 3 of these divs with hidden sections but was hoping to use one function to control all 3.
Here's what I have right now:
$('.rates, .hours, .otherinfo').click(function() {
$('.expand').toggle();
});
Here's the HTML:
<div class="rates">
<h2>Rates</h2>
<div class="expand">
<p>Text in here is hidden by default.</p>
</div>
</div>
<div class="hours">
<h2>Hours</h2>
<div class="expand">
<p>Text in here is hidden by default.</p>
</div>
</div>
<div class="otherinfo">
<h2>Other Info</h2>
<div class="expand">
<p>Text in here is hidden by default.</p>
</div>
</div>
And CSS:
.expand {
display:none;
}
Obviously, this shows the "expand" div for all 3 of the divs when you click on any of them. Is there a way to incorporate this into the selector. Something like this'.expand'?
Thanks!

$(this).find('.expand').toggle()

You should add a fiddle for better answer. But something like this should work.
$("#something").click(function(){$(this).children("section").toggle();});

Related

Image Not Appearing in JQuery Script

I'm having trouble getting an image to show up that has been written within in a body. The specific image being the <img src="Images/Attachments/Shining.gif">
Not too sure if the script needs to be altered or if I would have to put it inside its own class. When I tried to append, the image showed up in both emails instead of the one I wrote it in. I'm coding this using Twine, Sugarcube btw!
<div class="header">
<div class="hamburgerWrapper">
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<div class="EmailsWrapper">
<div class="ExtendMsg">
<p>Extended Messages will be placed under here.</p>
</div>
</div>
<div class="Email">
<div class="ImgWrapper">
<img src="Images/Phone Icons/User.png>
</div>
<div class=" EmailTitle">
<p class="EmailTime">9:31 PM</p>
<h1>Sender</h1>
<h2>Subject Title</h2>
<p class="EmailPreview">Email content to be filled out here.</p>
</div>
</div>
<div class="Email">
<div class="ImgWrapper">
<img src="Images/Phone Icons/User2.png">
</div>
<div class="EmailTitle">
<p class="EmailTime">9:29 PM</p>
<h1>Sender2</h1>
<h2>Subject Title</h2>
<p class="EmailPreview">Here is a gif for your memeing pleasure. <img src="Images/Attachments/Shining.gif"></p>
</div>
</div>
<<done>>
<<script>>
$(".Email").on("click", function() {
$(this).addClass("active");
$(".Email").not(".active").addClass("deactive");
$(".ExtendMsg").addClass("active");
$(".ExtendMsg").html($('
<div />').html($(".EmailPreview", this).text()));
$(".headerLabel h1").text("MESSAGES");
});
$(".hamburgerWrapper").on("click", function() {
$(".Email.active").removeClass("active");
$(".Email.deactive").removeClass("deactive");
$(".ExtendMsg").removeClass("active");
$(".headerLabel h1").text("MESSAGES");
});
<</script>>
<</done>>
I'm not totally sure what you are trying to achieve.
But I'd guess that you want to show and image, when ever you click something above?
If that is so, the classes are not met to handled that kind of jobs in Javascript. You might do so, if you assign the image to a Class property background-image: url("heregoesyourimages.png") but there are better ways to handle that kind of behavior.
If you have to use JQuery, you can use simply the method: "Show" or "Hide" that will display in and out an element:
First assign an identifier to your element to toggle (class or id):
<div class="ImgWrapper">
<img class="User2Image" src="Images/Phone Icons/User2.png">
</div>
Then, use the method $(".User2Image").Hide(); to make the image appear or disappear (what this do actually is that adds the property Display:none, to the element (correct me if I'm wrong its been a while since I used JQuery) or $(".User2Image").Show(); to show again the image.

How to get only child elements outside a certain class jquery

This is the scenario. The black element has an ID and theoretically I want to select like this:
$("#someid .class2")...
I don't want to get the element inside the red element though. And yes, the classes are written correctly, the red element and black have the same class...
Also, there may be elements between any of these elements (like in nested - the green element inside the red one might be nested inside multiple other elements, so the red one is not necessarily the parent)
So basically ignore all class1 elements other than itself.
How can I get this?
Edit: I added 2 examples. The query, whatever it is, should work for both.
Example 1
<div id="someid" class="class1">
<div class="class1">
<div>
<span class="class2"></span> <---- NO
</div>
</div>
<div>
<span class="class2"></span> <-----YES
</div>
</div>
Example 2
<div id="someid" class="class1">
<div>
<div>
<div class="class1">
<div>
<span class="class2"></span> <---NO
</div>
</div>
<span class="class2"></span> <-------YES
</div>
</div>
<div class="class1">
<span class="class2"></span> <--------NO
</div>
<span class="class2"></span> <-----------YES
</div>
console.log(document.querySelectorAll("#test1 > .class2"))
<div id="test1" class="class1">
<div class="class1">
<div class="class2">test 3</div>
</div>
<div class="class2">test 1</div>
</div>
In this example im using vanilla javascript but with jQuery the css selector it would be the same.

Remove flickering on resizing ajacent divs

I use Twitter Bootstrap and JS to make a kind of sliding sidebar. When you click "Toggle", the selected column with "col-lg-1" expands to "col-lg-3" and "col-lg-10" shrinks to "col-lg-8" (with jQueryUI's switchClass() ). For animated effect on show() and hide() I use jQueryUI. But during animation and column resizing the contents of #content flicker (disappear and shown again when the animation is over).
HTML is:
<div class="row">
<div class="col-lg-1" id="menu-1">
Toggle
<ul>
<li>
...
</ul>
</div>
<div class="col-lg-1" id="menu-1">
Toggle
<ul>
<li>
...
</ul>
</div>
<div class="col-lg-10" id="content">
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
Cleaned JS is something like:
if ($col.hasClass('col-lg-3')){
// hide on second click
$col.switchClass('col-lg-3','col-lg-1');
$content.switchClass('col-lg-8', 'col-lg-10');
}else{
// open
var $sibling = $bar.siblings('.col-lg-3');
if($sibling.length == 1){
// close sibling if it's open
$sibling.switchClass('col-lg-3','col-lg-1');
}
$col.switchClass('col-lg-1','col-lg-3');
$content.switchClass('col-lg-10', 'col-lg-8');
}
Could you suggest a fix? Or recommend another solution?
UPD:
JSFiddle
Browser: Firefox 27.0.1

Issues implementing simple 'toggle' / (show/hide) on div, on mouseclick, using JavaScript

So I'm trying to make a div class element toggle/ or show hide an set of id elements upon mouse click. So on click on the 'result_location id' I'm trying to display all the divs under result_menu class beneath it.
Am I going the right way about this? Hope you can help! Here's my HTML and JS code:
HTML:
<div id="result_location">
<h3>MainText Here</h3>
</div>
<div class="result_menu">
<div id="a_column">
<h4>text</h4>
</div>
<div id="b_column">
<h4>text</h4>
</div>
<div id="c_column">
<h4>text</h4>
</div>
<div id="d_column">
<h4>text</h4>
</div>
</div>
</div>
</div>
JS:
$(document).ready(function() {
$('#result_location').click(function() {
$('.result_menu').slideToggle("fast");
});
});
It appears to be working fine for me, I threw up a quick html page without a problem. Only thing I can think of is that you must load jquery before the JS that you mentioned. Other than that it should be working!

Hide/show inner divs on hover in an accordion with jQuery

kindly take a look at my HTML code below:
<div class="accordion">
<ul>
<li class="box1">
<div class="normal"> CONTENT HERE </div>
<div class="expanded"> CONTENT HERE </div>
<div class="hidden"> CONTENT HERE </div>
</li>
<li class="box2">
<div class="normal"> CONTENT HERE </div>
<div class="expanded"> CONTENT HERE </div>
<div class="hidden"> CONTENT HERE </div>
</li>
<li class="box3">
<div class="normal"> CONTENT HERE </div>
<div class="expanded"> CONTENT HERE </div>
<div class="hidden"> CONTENT HERE </div>
</li>
</ul>
</div>
Basically it's an accordion powered by a jQuery plugin. It has 3 boxes and depending on which box the user is hovering on, I wish to have the inner divs (normal, expanded, hidden) shown or hidden. Here are the scenarios:
On default, all div.normal will be shown by default, div.expanded and div.hidden will be hidden.
When user hovers on li.box1 for example, its div.expanded will be shown and div.normal and div.hidden will be hidden. For li.box2 and li.box3 then however, only div.hidden will be shown respectively, the rest of the divs will be hidden.
I have begun with the code but I don't think it's going anywhere. (I am a designer, you see.)
It sounds complicated but I know it can be easily done via jQuery, to anyone who can help, I'd really appreciate it.
UPDATE:
Here's what I've done so far.
$(document).ready(function () {
$(".accordion li").hover(function () {
$(this).siblings().children(".normal").hide();
$(this).siblings()..children(".hidden").delay(700).show();
$(this).children(".expanded").delay(700).show();
}, function () {
$(this).siblings().children(".normal").delay(700).fadeIn("fast");
$(this).siblings().children(".hidden").fadeOut("fast");
$(this).children(".expanded").fadeOut("fast");
});
});
You can initially hide divs by using style='display:none'
for hover event;
$("li.box1").hover(function(){
$(this).find('.expanded').show();
$(this).find('.hidden').show();
$(this).find('.normal').hide();
});
$(document).ready(function(){
$('.expanded').hide();
$('.box1').hover(function(){
$('.expanded').show();
});
});
This is how you can hide and show DOM elements in jQuery. Please get that set according to the way you want it to be.

Categories