I'm fairly new to Jquery and Javascript in general and I was wondering, how do I change text on a button after hiding something.
as far as i know, you hide something via this code:
$("element").click(function() {
$("element2").hide("slow");
});
and to show something:
$("element").click(function() {
$("element2").fadeIn("slow");
});
so what i want to do is have an article type thing, and when a "hide" button is pressed, it hides all the paragraph text, but leaves another button saying "show"
How do I accomplish this?
You just need one button and change its text. Lets assume all the content is visible from the beginning. Add a button to your HTML and give it an ID so you can easily identify it:
<button id="toggleButton" type="button">Hide</button>
Then bind an event handler to the button which
toggles the visibility of the elements you want to show/hide and
changes the text content of the button
And here it is:
$('#toggleButton').click(function() {
// toggle visibility if all p elements
$('p').toggle();
// Change text based on current text
// If the current text is 'Hide' then we just hid the elements and
// we have to change the text to 'Show' (and vice versa).
$(this).text(function(i, current_text) {
return current_text === 'Hide' ? 'Show' : 'Hide';
});
});
DEMO
Reference: .click, .toggle, .text, conditional operator.
You have to adjust the selector to only match elements you really want to hide, but jQuery has great documentation about all possible selectors.
jQuery's documentation is pretty extensive and spending some time just reading through is worthwhile.
Since you are just starting, I recommend to read http://eloquentjavascript.net/ and/or the MDN JavaScript Guide, and the jQuery tutorial (in that order).
To Hide:
$("element").click(function() {
$("element2").hide("slow");
$("element").text('Show');
});
To Show:
$("element").click(function() {
$("element2").fadeIn("slow");
$("element").text('Hide');
});
Change button value like
$("element").click(function() {
$("element2").hide("slow");
$("#btnID").prop('value', 'Show');
});
$("element").click(function() {
$("element2").fadeIn("slow");
$("#btnID").prop('value', 'Hide');
});
I usually have two buttons, one with text show and another with hide text, then when you click in one of them show one and make all the stuff necessary and hide it shelf.
HTML:
Show
Hide
<p id="textshow" style="display:none"> lorem ipsum</p>
Javascript:
$('#bshow').click(function() {
$('#bhide').fadeIn();
$('#textshow').fadeIn();
$(this).hide();
});
I think this jsFiddle can help you:
Related
I'm trying to learn how to make HTML text toggle with jQuery, which is pretty easy in itself, but I want the text to be hidden automatically until it is clicked on with a button. I've looked it up and I can't find how to do this. I figured it should be easy, and I have this part
<h4 id="text1">This is some toggleable text</h4>
$(document).ready(function(){
$("#button1").click(function(){
$("#text1").toggle();
});
});
Which works fine as a regular toggle, but this leaves the text there until first clicked on.
Codepen: https://codepen.io/anon/pen/bYYeEB
The jQuery show,hide and toggle functions simply alter the CSS display property to have either display: block; or display: none;.
To start with your element hidden just set the style attribute style="display:none;".
$(document).ready(
function(){
$("#button1").click(toggle);
}
);
function toggle() {
$("#text1").toggle();
}
toggle();
Calling toggle at the bottom will auto hide the element. This still isn't the greatest since the element will show until this code runs.
But you can always change the HTML to read like this:
<h4 id="text1" style="display:none">This is some toggleable text</h4>
Then you don't need to call toggle the first time.
<script>
$(document).ready(function() {
$("#text1").css("display", "none");//you just have to add this line
$("#button1").click(function() {
$("#text1").toggle();
});
});
</script>
Think of the following HTML code to apply Jquery:
HTML code:
<div id="outer_div">
<div id="inner_div_1"></div>
<div id="inner_div_2"></div>
<div id="inner_div_3"></div>
</div>
By default, the "outer_div" is hidden. It appears while clicked on a button using Jquery show() function.
I wanted to do the following: On click within anywhere of "outer_div" excluding the area within "inner_div_1" , the "outer_div" would again be hidden. I failed while tried the following codes. What should I amend?
Attempted Jquery 1:
$("#outer_div:not(#inner_div_1)").on("click",function(){
$("#outer_div").hide("slow");
});
Attempted Jquery 2:
$("#outer_div").not("#inner_div_1").on("click",function(){
$("#outer_div").hide("slow");
});
Your support would be highly appreciated.
You need to consider that a click in the inner div is also a click on the outter div. That being said, you just need to check the target and target parents :
$("#outer_div").on("click",function(e){
if(!$(e.target).closest('#inner_div_1').length) $("#outer_div").hide("slow");
});
You can use some of the data in the event
$("#outer_div").on("click",function(e){
if( // Fast check to see if this is the div
e.target.id !=='inner_div_1'
// We limit the 'closest()' code to the outer div. This adds children to the exclude
&& $(this).closest('#inner_div_1, #outer_div')[0].id=='outer_div'){
alert('good click');
}
});
This is a solution for your code now, this works perfect when not too many excluding objects. But no wildcard selectors, which is nice.
And a jsFiddle demo.
Other properties can be used to, like a class:
$("#outer_div").on("click",function(e){
if( e.target.className!=='even'
&& $(this).closest('.even, #outer_div')[0].id=='outer_div'){
alert('yay, clicked an odd');
}
});
I made 7 lines, gave the even ones a class 'even'.
Ok so I want to make so in the profile list, you can click on the profile and it will be highlighted (another background color, lets say yellow). And when you have highlighted this and press "save", somehow i wish to pick the highlighted profiles id and output them.
So my first question:
http://jsfiddle.net/5pZ2v/3/
How can i do something like so you can pick/unpick by clicking/unclicking? And they will be highlighted. And how can i make a selector that grabs these highlighted profile boxes?
Maybe there already exists a function for this or plugin?
Else how can i do this clicking/unclicking to highlight/unhighlight and then output the highlighted element's id attribute in an alert, that appears when you click on a "Show what you choose" button
Use something like this:
$('div.profile').click(function(){
$(this).toggleClass('selected');
});
Then use div.profile.selected to style the selected profiles in your css. Then when you want to select all the divs that are highlighted just use $('div.profile.selected'). If you want to know how many are selected just use $('div.profile.selected').length. Here's an example:
http://jsfiddle.net/Paulpro/apvqM/
Did you try .toggleClass()?
i.e. create a css class highlight and add
$("div").click(function () {
$(this).toggleClass("highlight");
});
HTH
Ivo Stoykov
PS: Look documentation here
You can use the click function of jQuery to mark/unmark a div.
$("div.profile").click(function () {
// if it's unmarked we mark
if(!$(this).hasClass('selected'))
$(this).addClass('selected');
else
$(this).removeClass('selected');
}
You can then use each to get all the marked div :
$("div.selected").each(function () {
// do what you want
});
For the boxes not appearing black, it comes from a missing semicolon after the height attribute ;)
http://jsfiddle.net/vol7ron/5pZ2v/8/
First you need to give your DIVs an ID then look at my Fiddle.
$("div").click(function () {
$(this).toggleClass("highlight");
});
$('#save-button').click(function(){
$('#output').html(''); // clear the output div
// Loop through each selected div and output it's ID
$('div.highlight').each(function(){
$('#output').append('<div>' + $(this).attr('id') + '</div>')
});
});
I've written jquery for a toggle button...
$(document).ready(function(){
/* Needs to be re-written for multiple questions */
$(".full_question").hide();
$('.question a').after('<a class="show_full_question" href="#">more</a>');
$('.show_full_question').click(function() {
var el = this;
$(".full_question").toggle(function() {
$(el).text($(el).text() == 'less' ? 'more' : 'less');
$(el).toggleClass("hide_full_question");
});
});
});
it toggles between the full question width and partial width. But when clicked it toggles for all questions on the page. How would I get it toggle only one?
I know it has something to do with $(this) but not sure where it goes... I don't mind changing the html if necessary.
The html is...
<h3 class="question">
<a href="#">What size is the circumference of the earth? I don't really know what it is! Help me! What size is the...
<span class="full_question"> circumference of the earth? I really don't know!</span>
</a>
</h3>
The problem is $(".full_question").toggle(), will toggle all elements with the full_question class. You need to somehow link the current element being clicked with the proper full_question.
Since you have one full_question and one show_full_question button under the same parent you can use jQuery to get the parent and find the question to toggle:
$(this).parent().find(".full_question").toggle()
If you are certain that HTML structure won't change you can also do:
$(this.previousSibling.childNodes[1]).toggle()
Here's a jsfiddle example.
I need to use multiple floating help dialog boxes in a page. I have tried it by using 'display:block' and 'display:none' and used ID in javascript. I cannot use classes since I have multiple of them on the same page and if I use classes then all of them will be displayed/hide at the same time. However, as the number of help items are increasing in the page, I have to go back to the javascript and add more lines ...
for example:
$(document).ready(function() {
$("#help-icon1").click(function() {
$('#help-details1').css('display', 'block');
});
$("#help-icon2").click(function() {
$('#help-details2').css('display', 'block');
});
$("#help-icon3").click(function() {
$('#help-details3').css('display', 'block');
});
});
Each of them also have close icons and they should be disappeared if clicked on that close icon or clicked anywhere in the page. That means I have to write javascript functions 3 times for all the different close icons.
I tried to rely on jquery's "next" feature, but since there are many layers (div/p/span) in between the areas where the help icon is places and the help text, it becomes problamatic. Any idea or any better way to resolve this?
Thanks in advance.
I'm not quite sure I understand what you are looking for, but you can set up all the click handlers in one step, and have each one refer to itself in the handler:
jQuery(".help-icon").click(function() {
jQuery(this).css('display', 'block');
});
You can add additional class names to an element.
A div can be hidden by default, and a new class can be appended to it - to "overrule" the previous style (Hence the name Cascading Style Sheets)
<div class="hidden exception"></div>
If an element is clicked, you can append a new classname like so:
$('.target').addClass('newclass');
more info:
http://api.jquery.com/addClass/
I've not done it using JQuery but what you need is "unobtrusive javascript".
It does get done by using a class. Say you have images you all want highlighted:
<img src="pic1.png" onMouseover="this.src='hi_pic1.png';" />
so they all have the same behaviour. Give them a class:
<img src="pic1.png" class="hi" />
Then at load time, on in the script at the end of your page, yahoo-style, you write an initialisation to
- grab every element of the class
- add the event(s) you want
- set the event to use the appropriate data, e.g. by using this and by using systematic names like pic1 -> hi_pic1.
Hope this helps,
Charles
Have you tried the jQuery .each function?
EDIT: Like the following
$(".help-icon").each(function(idx, elm){
elm.click(function(){
...
})
});
If all of your help icons have the same class you can use jQuery's each function to loop through them, retrieve the associated id, replace "icon" with "detail" in the id (so #help-icon3 would become #help-detail3), and then use that to update the panel. Something like:
$(".help-icon").each(function() {
var detailsId = $(this).attr("id").replace("icon", "details");
$("#" + detailsId).css('display', 'block');
});
Let's just ASSUME that you need to use IDs for some unknown reason. Here's your answer to combine efforts:
$("#help-icon1").add("#help-icon2").add("#help-icon3").click(function() {
$(this).css('display', 'block');
});
Which equates to:
$("#help-icon1, #help-icon2, #help-icon3").click(function() {
$(this).css('display', 'block');
});
But really, you don't need to use unique IDs like this without some pretty good reasons.