Toggle Image Source on Click - javascript

I'm trying to do a typical expand and collapse function to display/hide a div on image click.
Here's my HTML:
<div id="result_location">
<h3>Heading Text here</h3>
</div>
<div class="result_menu"></div>
And my JavaScript:
$('#result_location').click(function() {
$('.result_menu').slideToggle("slow");
});
So there's going to be an image within the #result_location div, that alternates between a plus/minus when the .result_menu gets toggled.
Hope that kinda makes sense!

Have wrote a fiddle for you.
Basically toggling the source will done the trick.
Here is the code
Html
<div class="msg_list">
<p class="result_location">Heading Text here<img src="http://prtlimages.cunamutual.com/ImageServer/Portal/B2B/CollapseSign.gif"></img></p>
<div class="result_menu">
This <br/>
is <br/>
a <br/>
Testing <br/>
Content
</div>
</div>
javascript
$(".result_location").click(function(){
$(this).next(".result_menu").slideToggle("slow");
})
.toggle( function() {
$(this).children("img").attr("src","http://prtlimages.cunamutual.com/ImageServer/Portal/B2B/ExpandSign.gif");
}, function() {
$(this).children("img").attr("src","http://prtlimages.cunamutual.com/ImageServer/Portal/B2B/CollapseSign.gif");
});
check the fiddle here

Assuming I read correctly, your "trigger" is .result_menu. Here is a JSFiddle that accomplishes what I think you're looking for: http://jsfiddle.net/trevanhetzel/P4N2c/
Essentially, we bind to the trigger element using .on("click") and then find the image to toggle and .slideToggle it. Pretty straightforward.
$(function () {
$(".result_menu").on("click", function () {
$("#result_location img").slideToggle();
});
});
You'll also want to display: none the image in the CSS.
Am I missing anything about your desired outcome?

You could toggle a class on #result_location and then add the arrow image as a CSS background image for that selector. When clicked again the class would be removed, thus removing/changing the image.

Related

How do I get a jQuery function to work with specific elements when they have the same class names?

I have sections (divs) with text in it, but when the text is too long I made it so the text "fades" (with css) and displays a "show more" button, which shows the full text for that specific div when clicked. The problem is that it only works for the first div, and I believe it's because they all have the same class and id name. What's the best way to get around that? Here's my code:
HTML:
<div id="fade-container">
<div id="fade-content">
<p>
Long text goes here...
<div class="fade-anchor"><span class="btn-primary round-xl small btn-shadow">Show more</span></div>
</p>
</div>
</div>
Script:
<script>
$('.fade-anchor').click(function(e){
e.preventDefault();
$('#fade-content').css('max-height','none');
$('.fade-anchor').remove();
});
</script>
By the way, info is being fetched from the database in a php while loop.
When the user clicks on .fade-anchor you can use thisto get the element currently selected, you should also use classes instead of ids for multiple elements, like so:
$('.fade-anchor').click(function(e){
e.preventDefault();
$(this).parent('.fade-content').css('max-height','none');
$(this).hide(); // Maybe you should hide instead of removing, in case you want to add a toggle effect later on.
});
You can also check out this jsFiddle with the working version.
Hope it helps.
You can achieve it by e.currentTarget
$('.fade-anchor').click(function(e){
e.preventDefault();
$(e.currentTarget).css('max-height','none');
$('.fade-anchor').remove();});

Show children/find

I have a few buttons and under every single one there is some div with display:none. All I want to do is to show the div after click under the particular button but it doesn't work and I don't know why. Could someone take a look at it please?
> button
<div class="hideHelper" style="display:none;">
</div>
here goes the script:
<script>
$(".settingsButton").click(function(){
$(this).find(".hideHelper").show();
})
</script>
Your code isn't working because find will search for children of the selector, and the div you wish to show is not a child of the button.
Try next:
$(".settingsButton").click(function(){
$(this).next(".hideHelper").show();
});
You can also find it using siblings as follows:
$(".settingsButton").click(function(){
$(this).siblings(".hideHelper").show();
});

How to change dynamically a href reference

I have a navbar, like this:
<a href="#head" class="navbar-icon iconactive" id="startIcon">
I dynamically create:
$(".content").append("<div id="1"><section class='section' id='head'>.....);
$(".content").append("<div id="2"><section class='section' id='head'>.....);
head is the id of the section that is currently displayed (I have 2 divs).
I want to dynamically change the navbar a href depending on the div that is currently displayed.
Use .toggle();
$(function() {
$('.toggle').on('click', function() {
$('.content1').toggle();
$('.content2').toggle();
});
});
.content2 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Toggle
<div class="page">
<div class="content1">:)</div>
<div class="content2">:(</div>
</div>
http://jsfiddle.net/fmkaj81p/
I'm pretty sure that the best way to handle this is using
http://api.jquery.com/index/
I understood you establish the first div as visible, right? Then just when your event (might be a scroll or keyboard input or click ) to hide div and show other happens just add to your logic the a href update as something like
$("a").attr("href",$("newDiv").attr("id"));
Also go inside the next link to get your own working depending on your jQuery version
http://api.jquery.com/attr/

Changing CSS class in jQuery

I'm trying to change the CSS class of a couple DIVs, Linked below is my jFiddle
The only change is that the -selected class actually has a background image which seems to have the background color of the -non-selected class.
The other problem is after selecting another div, you can't select the first one again. What exactly is jQuery doing with the classes? When I add the -non-selected class to it, it should become select-able again, right?
http://jsfiddle.net/9FZcz/
jQuery
$(".selector-box").click(function () {
$(".selector-box-selected").removeClass("selector-box-selected").addClass("selector-box");
$(this).removeClass("selector-box").addClass("selector-box-selected");
});
HTML
<div class="selector-box-selected"></div>
<div class="selector-box"></div>
<div class="selector-box"></div>
<div class="selector-box"></div>
CSS
.selector-box{
margin-bottom:2px;
width:328px;
height:46px;
background-color:rgba(255,255,255,.25);
}
.selector-box-selected{
margin-bottom:2px;
width:351px;
height:46px;
background-image:url(../images/layout/SelectedArrow.png);
}
You should try another way to adding and removing classes, try this one :
$(".selector-box").click(function () {
$('.selector-box').removeClass("selected");
$(this).addClass("selected");
});
Updated JsFiddle
The problem with not being able to select the first one again is that the click event is not being linked to it, since you only apply it to the <div> elements with the class .selector-box. Apart from that, CSS seems fine, check the fiddle: http://jsfiddle.net/9FZcz/2/
I change your code abit
<div name="ss" class="selector-box-selected"></div>
<div name="ss" class="selector-box"></div>
<div name="ss" class="selector-box"></div>
<div name="ss" class="selector-box"></div>
$("div[name=ss]").click(function () {
$("div[name=ss]").removeClass("selector-box-selected").addClass("selector-box");
$(this).removeClass("selector-box").addClass("selector-box-selected");
});
don't mind a name SS, change it to what you want :D
There are already answers posted that suggests solutions that requires some refactoring, like adding a selected class to selected elements rather than having seperate selector-box-selected and selector-box classes.
While I think you should perform the refactoring since it makes the overall design better and leads to less CSS code duplication, here's a solution without refactoring the code.
I kept track of the last selected element to avoid looping over all of boxes to remove the selected class.
DEMO
var selectedBox = $('.selector-box-selected').get();
$('.selector-box').add(selectedBox).click(function () {
if (selectedBox === this) return;
selectedBox = $([this, selectedBox])
.toggleClass('selector-box-selected')
.toggleClass('selector-box')
.get(0);
});

Applying CSS property in Jquery

I am working on 'OnClick' functionality in jQuery. When we click Div property other divs should fade out.
Please find the code below.
HTML:
<div>1</div>
<div class="ree">2</div>
<div class="foo">
<div class = "bar">
<div class="nike">3</div>
</div>
</div>
<div>4</div>
jQuery:
$('.nike').on('click',function ()
{
$('div:not(.nike)').css('opacity','0.2')
});
Here When I click on Div Class 'Nike', Except 'Nike' all Div classes should fade out. But here All Divs including Nike is fading out.
http://jsfiddle.net/6V8hr/5/
Thanks all
Since you have nested DIVs, those parent DIVs are getting faded out, also causing your nike div to fade out.
While this code isn't perfect... it works for what you need it to.
DEMO
$('.nike').on('click',function () {
$('div').not('.foo').not('.bar').not('.nike').css('opacity','0.2')
});
So I'm basically listed the classes in your tree containing nike, making sure none of those are affected.
$('.nike').on('click', function() {
$('div:not(.nike):not(:has(.nike))').css('opacity', '0.2');
});
Well this code seems better suited
$('.nike').on('click', function () {
$('div').each(function () {
if ($('.nike').closest($(this)).length == 0) {
$(this).css('opacity', '0.2');
}
})
});
http://jsfiddle.net/H17737/nr5bL/
I read the HTML all 10 kinds of wrong. Below is the revised, short sweet and to the point. Add class="hideThis" to any divs you would want to be "hidden". If you have multiple sibling divs that you want to hide/show on click, you could give them all the hideThis class and replace the $('.nike') with $('.hideThis')
$('.nike').click(function() {
$(this).css('opacity','1'); //in case something else got clicked & hid this
$('.hideThis').not($(this)).css('opacity','0.2'); //hide everything else
}

Categories

Resources