I am trying to create a function that will toggle optional inputs if chosen, here is what I have done so far:
HTML:
<div>
<input>
<a class="input-toggle" href="#"><span>Toggle Option</span><span>Close</span></a>
<div class="input-toggle-content">
<input name="">
</div>
</div>
JavaScript:
$('.input-toggle').each(function() {
$(this).next("div").hide().end();
$("span:last-of-type").hide();
$(this).on('click', function() {
$(this).next("div").slideToggle();
$("span:first-of-type").hide();
$("span:last-of-type").show();
});
});
So, the way it should work is when clicked on .input-toggle the div that is just next to it will be toggled and if clicked again the div will go away... I got this bit working, however, I want to also toggle <span>Toggle Option</span> with <span>Close</span> and I can't get it working... I don't know if the way I structured my function is correct?
Try,
$('.input-toggle + div.input-toggle-content').hide();
$(".input-toggle span:last-of-type").hide();
$('.input-toggle').click(function () {
$(this).next('div.input-toggle-content').toggle();
var spans = $('span', this);
spans.not(spans.filter(':visible').hide()).show();
});
DEMO
here you go: http://jsfiddle.net/jPe3A/
$('.input-toggle').each(function() {
$(this).next("div").hide().end();
$("span:last-of-type").hide();
$(this).on('click', function() {
$(this).next("div").slideToggle();
if($("span:first").is(':hidden')){
$("span:first").show();
$("span:last").hide();
}
else{
$("span:first").hide();
$("span:last").show();
}
});
});
Related
Hi im new on js and honestly speaking we're just starting learning js on our school. What i want to do is once i already click it it will be reset and remove the class again. "myClass has a display none"
$(function() {
$("body").click(function() {
$(".parela").addClass('myClass');
});
});
You can use toggleclass
$(function() {
$("body").click(function() {
$(".parela").toggleClass('myClass');
});
});
Use toggleClass, so at every click it will be added/removed automatically
$(function() {
$("body").click(function() {
$(".parela").toggleClass('myClass');
});
});
You want to use toggleClass() which will toggle the class on and off depending on the click. note that for the demo below - I created the button that toggles the class on the button click.
Another way of doing it - since the only effect is to hide the element - is just .toggle() which toggles the display state without the use of the added class. The following snippet shows both methods.
$(function() {
$("#toggleButton").click(function() {
$(".parela").toggleClass('myClass');
});
$("#toggleButton2").click(function() {
$(".parela2").toggle();
});
});
.myClass{display:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Using .toggleClass('myClass')</p>
<button type="button" id="toggleButton">clickMe</button>
<span class="parela"> Visible</span>
<hr/>
<p>Using just .toggle()</p>
<button type="button" id="toggleButton2">clickMe</button>
<span class="parela2"> Visible</span>
You can you use some sort of 'flag' variable to control the state.
You can name it whatever you want and make if statement to make decisions accordingly.
$(function() {
var flag = false;
$("body").click(function() {
if(!flag) {
$(".parela").addClass('myClass');
flag = true;
} else {
$(".parela").removeClass('myClass');
flag = false;
}
});
});
Im a bit new to jquery so this may be a common probably but I am unable to find what I need on the web.
The issue:
I have a div(inner1) inside a div(outer), the inner1 div is hidden until a button is clicked, when clicked the inner1 div is shown and fades out the background. Within inner1 I have another div(inner2) with similar functionality. When inner1 shows a button is displayed to show inner2. The above works fine. My issue is that if I click the button to show inner1, then exit(hide) the shown div(inner1) then push the button to show it again it now shows both of the inner divs(inner1, inner2). Does this make sense? I have no idea why this is happening.
The Code:
Html:
<div class="documentlist">
<div class="modalBackground"></div>
<div class="modalContent"> x
Text1
<input type="button" id="btnsm1" value="t1" />
<div class="documentdetails">
<div class="modalBackground"></div>
<div class="modalContent"> x Text2</div>
</div>
</div>
</div>
<input type="button" id="btnsm" value="t" />
Jquery:
$(document).ready(function () {
$('#btnsm').on('click', function () {
$('.documentlist>.modalBackground').toggleClass('show');
$('.documentlist>.modalContent').toggleClass('show');
});
$('#btnsm1').on('click', function () {
$('.documentdetails>.modalBackground').toggleClass('show');
$('.documentdetails>.modalContent').toggleClass('show');
});
$('.close-modal').on('click', function () {
$('.modalBackground').toggleClass('show');
$('.modalContent').toggleClass('show');
});
$('.modalBackground').on('click', function () {
$('.modalBackground').toggleClass('show');
$('.modalContent').toggleClass('show');
});
});
A Fiddle of the above.
Does anyone have any ideas?
You need to explicitly say removeClass since .toggle() adds 'show' if not there and removes 'show' if present, cant rely on that in close where you always want to remove the show class from both the elements
Here is what you want to do
$('.close-modal,.modalBackground').on('click', function () {
$('.modalBackground').removeClass('show');
$('.modalContent').removeClass('show');
});
Edit 2: I didn't check you had to use back as close trigger updated fiddle $('.close-modal,.modalBackground')
Updated fiddle
$(document).ready(function () {
$('#btnsm').on('click', function () {
$('.documentlist>.modalBackground').toggleClass('show');
$('.documentlist>.modalContent').toggleClass('show');
});
$('#btnsm1').on('click', function () {
$('.documentdetails>.modalBackground').toggleClass('show');
$('.documentdetails>.modalContent').toggleClass('show');
});
$('.close-modal').on('click', function () {
$('.modalBackground').removeClass('show');
$('.modalContent').removeClass('show');
});
$('.modalBackground').on('click', function () {
$('.modalBackground').removeClass('show');
$('.modalContent').removeClass('show');
});
});
Check this
I have the following HTML code, generated by C#:
<div class="more-news-items" id="#id">
<p>Content goes here</p>
<div style="text-align:center">
<button class="newsfeed-hide">TOON MINDER</button>
<button class="newsfeed-more">TOON MEER</button>
</div>
</div>
I want to hide the
<p>Content goes here</p>
using the following Javascript code, but I want to keep the buttons still in the div. How would I achieve this, and if it is not possible, how can I do this?
$(document).ready(function () {
div.find('.newsfeed-hide').click(function () {
$('.more-news-items').html('');
});
});
Try
$(document).ready(function () {
$('.newsfeed-hide').click(function () {
$('div.more-news-items').children('p').hide();
});
});
OR
$(document).ready(function () {
$('.newsfeed-hide').click(function () {
$('div.more-news-items p').hide();
});
});
OR
$(document).ready(function () {
$('.newsfeed-hide').click(function () {
$(this).parent().siblings('p').hide();
});
});
try:
$(document).ready(function () {
$('.newsfeed-hide').click(function () {
$(this).parent().siblings('p').hide();
});
});
This will hide a p's that are siblings of the parent that the button is in.
But other posts are right in as much as if you want to hide all p's in div's with the class .more-news-items you can select this using $('.more-news-items p') instead. Depending on the exact situation you are using this code in (i.e. if you will have more than one area and only want all p's in all areas removed, or only the ones local to the button.
EDIT:
Remove the $('.more-news-items').html(''); also, this will remove all html inside the .more-news-items div, which you do not want to do here.
Here is the live example: http://jsfiddle.net/lee_gladding/dujc66qd/
I try to bind default open and close functions to all dialogs with following ways, however none is working.
$(document).on("dialogopen", ".ui-dialog", function(event, ui) {
});
$(document).on("dialogclose", ".ui-dialog", function(event, ui) {
});
or
$(".ui-dialog").bind("open", function() {
});
$(".ui-dialog").bind("close", function() {
});
Do you have any idea, what is wrong here?
Thanks for your help.
Edit:
I add this function to document ready function.
The following code assumes that all your dialogs container has .ui-dialog-selector class on them. this way you can select all the dialogs.
$(".ui-dialog-selector").bind("dialogopen", function() {
alert('OPen');
});
Similarly you have to bind close
$(".ui-dialog-selector").bind("dialogclose", function() {
alert('Close dialog');
});
UPDATE
JS FIDDLE DEMO
In the demo, you can see, I have 2 dialogs created with div id one and with div id two.
Both these div have classes ui-dialog-selector on it.
<div class ='ui-dialog-selector' id ="one" style="display:none">
<input type="text" value ="open one"/>
</div>
<div class ='ui-dialog-selector' id ="two" style="display:none">
<input type="text" value ="open two"/>
</div>
And then I bind the functions as I have shown above.
for open
$(".ui-dialog").bind("dialogopen", function() {
alert('Open');
});
for close
$(".ui-dialog").bind("dialogclose", function() {
alert('Close');
});
Here is the JsFiddle
I have a button that will add a new header, textbox, and a link when it's click.
But when I click on the remove link. It's removes every new item that was added.
Html:
<div id='main'>
Top of Boby
<div id='main_1'>
<div>
<h3> Item</h3>
<input type="text" />
</div>
</div>
</div>
JS:
$(function() {
$('.AddItem').click(function() {
$('div#main_1').append("<div><h3>Item</h3><input type='text' class='remove_skill'/><a href=''>Remove</a</div>");
});
})
$(function() {
$('.remove_skill').click(function() {
$(this).remove();
});
})
2 issues..
You have never defined the class for the anchor. Add the class to the anchor
You need to remove the enclosing div and not the anchor. Use .closest
Also you need to delegate the event as the elements are being added dynamically
$('#main').on('click', '.remove_skill', function (e) {
e.preventDefault();
$(this).closest('div').remove();
});
Check Fiddle
The problem with the code you've posted is that no links exist at the moment you call $('.remove_skill').click, so you can't add event listeners to them.
I recommend a step-by-step approach. Create, add behaviour, append to the document.
$('.AddItem').click(function () {
var new_element = $('<div class="item"><h3>Item</h3><input type="text"/><a class="remove" href="#">Remove</a></div>');
new_element.find(".remove").click(remove_item);
$('div#main_1').append(new_element);
});
function remove_item() {
$(this).closest(".item").remove();
return false;
}
I recommend <a href="#"> for javascript-handled links.
Alternative solution using a closure:
$('.AddItem').click(function () {
var new_element = $("<div class="item"><h3>Item</h3><input type='text'/><a class="remove" href="#">Remove</a</div>");
new_element.find(".remove").click(function() {
new_element.remove();
});
$('div#main_1').append(new_element);
});
Your problem is that your "Remove" is in an 'a' tag. This causes the page to reload, and removing all of your previous changes.