Show/Hide div with button - javascript

I have a a HTML page with a button which shoes hidden content when pressed. I am using jquery code which I have bundled into my HTML page. When I press the button to show the content in the hidden div it works find, however when I press the button again to hide the content nothing happens. If anyone could help me that would be great. Also how would I be able to target multiple buttons. Would I just paste the same jquery code and label it '2' and then '3' and so on for example? Any working examples would be great. Here is my code:
HTML:
<head>
<script>
$(document).ready(function() {
$("#spoiler1").hide();
$("#button1").click(function() {
$("#spoiler1").show(300);
});
});
</script>
</head>
<button id="button1">Adventurer ▼</button>
<div id="spoiler1" style="display:none">
<p>1. Climb a tree<input type="checkbox" /></p>
<p>2. Roll down a really big hill<input type="checkbox" ></p>
<p>3. Camp out in the wild<input type="checkbox" ></p>
<p>4. Build a den<input type="checkbox" ></p>
<p>5. Skim a stone<input type="checkbox" ></p>
</div>
Thanks in advance for any help or advice.

Use .toggle() instead
$(document).ready(function () {
$("#spoiler1").hide();
$("#button1").click(function () {
$("#spoiler1").toggle('slow');
});
});
Demo
Update
And the idea about having mutiple buttons, I've come up with the approach that you should try, use classes instead of IDs for the buttons and provide the same ID to divs that you want to toggle. This might take some design issues but you can manage and this is just a basic guideline to move forward.
As Markup is too long for mutiple divs so i'm posting only.
JQuery
$(document).ready(function () {
$(".category").click(function () {
$(".show").hide();
var divToShow = $(this).text().split(" ")[0];
$("#" + divToShow).toggle('slow');
});
});
Updated Fiddle

$(document).ready(function(){
$("#spoiler1").hide();
$("#button1").click(function(){
if($("#spoiler1").is(':visible')){
$("#spoiler1").slideUp(300);
}
else
{
$("#spoiler1").slideDown(300);
}
});
});
Demo:
http://jsfiddle.net/YvUDV/

Use toggle instead:
$('#button1').bind("click",function(){
$("#spoiler1").toggle("fast");
});

As for multiple button event. Assign a class name to the button so you can select by class.
$('button.toggle-div').click(function(){...});
As for visibility toggle, there are a number of ways.
Use toggle() in jQuery. (the most obvious choice, but in practice we could also..)
Use toggleClass() link to
add/remove a class which has a display:none css rule. (more flexible, you can toggle other css styles like the font color, background, etc.)
Use some
two-way binding JavaScript libraries like knockoutjs or angular.
(Probably an overkill for a small application. But it will
definitely reduce the amount of coding if it is a large scale.)

Related

Create a checkbox when checked it should show certain input fields & hide other input fields, within a Modal

<input type="checkbox" runat="server" name="Seasonal" value="Seasonal" id="isASeasonal" onclick=" if ($(this).is(':checked')) { console.log('Worky'); $('#ShowIfChecked').show(); $('#HideIfChecked').hide(); } else { $('#HideIfChecked').show(); console.log("No Worky"); }" />
I've been attempting to do this with jQuery, but it hasn't been functioning properly, I have also done a thorough amount of research for ways to condense this code. I was trying to condense the statement with a ternary operator. If you could please assist me with a possible solution that would be great! Thanks (Ternary Solution would be amazing)
The issue with your code is that you have mis-matched quotes in the HTML due to the console.log("X") calls in your code that is messing up the attributes of the input element. If you check the console you'll most likely see some errors relating to this.
It's for this reason, amongst many others, that it's considered bad practice to use inline script (or CSS styling for that matter). The other issues are that it's bad for separation of concerns and makes the code harder to read an edit. It's far better practice to attach your event handlers using unobtrusive Javascript, like this:
$('.seasonal-checkbox').change(function() {
$('#ShowIfChecked').toggle(this.checked);
$('#HideIfChecked').toggle(!this.checked);
});
#ShowIfChecked {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" runat="server" name="Seasonal" value="Seasonal" id="isASeasonal" class="seasonal-checkbox" />
<div id="ShowIfChecked">Checked!</div>
<div id="HideIfChecked">Not Checked!</div>
Note the use of the change event over click, so that the event is still fired for user who navigate the web using the keyboard. Also note the simplified logic using toggle() to hide and show the relevant content in a single call to each method which negates the need for an if statement - and by proxy a ternary expression too.
You can change your onclick to a function, because at least for me, it is easier to see whats really going on.
So change
<input type="checkbox" runat="server" name="Seasonal" value="Seasonal" id="isASeasonal"
onclick=" if ($(this).is(':checked')) { console.log('Worky'); $('#ShowIfChecked').show(); $('#HideIfChecked').hide(); }
else { $('#HideIfChecked').show(); console.log("No Worky"); }" />
to
<input type="checkbox" runat="server"
name="Seasonal" value="Seasonal" id="isASeasonal" onclick="myFuncton(this)" />
Within your view:
<script>
myFunction(myCheckBox)
{
if(myCheckBox.Checked)
{
console.log('Worky');
$('#ShowIfChecked').show();
$('#HideIfChecked').hide();
}
else
{
$('#HideIfChecked').show(); console.log("No Worky");
}
}
</script>
Now to get the expression/Ternary Solution you want, you can change this script to look like this:
<script>
myFunction(myCheckBox)
{
myCheckBox.Checked ? (console.log('Worky'), $('#ShowIfChecked').show(),
$('#HideIfChecked').hide()); : ($('#HideIfChecked').show(), console.log("No Worky"));
}
</script>
You can find more Info about Ternary Solutions here
We dont write code like this. It fails on every code review.
Do this:
$('#isASeasonal').click(function() { ...});
https://api.jquery.com/click/
Seasonal Address:&nbsp <input type="checkbox" runat="server" clientidmode="Static" name="Seasonal" value="Seasonal" id="isASeasonal"/>
$('#ShowIfChecked').hide(); //Hid What needs to be shown if checked.
$("#isASeasonal").click(function () { //Used Click event on checkBox
($("#isASeasonal").is(':checked')) ? (console.log('worky'), $('#ShowIfChecked').show(), $('#HideIfChecked').hide()) : (console.log('no worky'), $('#HideIfChecked').show(), $('#ShowIfChecked').hide());
What fixed my issue was that in ASP.net I needed to add clientidmode="static" to the div's that I was trying to hide & show. I still don't understand the reason why, I'm currently looking more into it but this is what worked for me but above you can see the majority of the final product with the ternary operator!! Yay.

How do I add/remove class onclick for span elements

I am creating a simple quiz site. I have a page with lots of different question options that the user can choose.
They click a question and the answers list slides down into view. When they click their chosen answer which is a <span> element I want that span to have a class "correct". If they decide to choose another answer when they click on it I want the class removed from their first choice and added to the current choice, so only one span element will have a class "correct" at any one time.
I have had problems with adding/removing classes onclick. I have shown snippets of my code below. I got a few answers from W3C and SO (which work on the Fiddles) but the code does not work on my site when I test it...I am using Notepad++ to create and test this site. Below is an example of my code....any help would be most appreciated.
$("carQuestion span").click(function() {
$('span.correct').not(this).removeClass('correct');
$(this).addClass('correct');
});
.correct {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="carQuestion">
What Car is most like me?
<span class="correct">Ferrari</span>
<span>Limousine</span>
<span>SUV</span>
<span>Stationwagon</span>
</p>
Behold this completely jQuery-less answer: ;)
label {display:block;cursor:pointer;}
label span {display:inline-block;padding:0.1em 0.5em;}
input[type=radio]:checked + span {background-color:#efe;}
input[type=radio] {display:none;}
<p>
What Car is most like me?
<label><input type="radio" name="carQuestion" checked="checked" /><span>Ferrari</span></label>
<label><input type="radio" name="carQuestion" /><span>Limousine</span></label>
<label><input type="radio" name="carQuestion" /><span>SUV</span></label>
<label><input type="radio" name="carQuestion" /><span>Stationwagon</span></label>
</p>
Thanks for everyone's help. I tried some of the options above but for some reason they just did not work on my layout. Then eureka! I found a way that worked for me on my own. If anyone else is having the same problem on Notepaad++ please see my function below which works perfectly.
<script>
$(document).ready(function(){
$("p span").click(function(){
$("p, span").removeClass("correct");
$(this).addClass("correct");
});
});
</script>
Again thanks for everyone's help.
You're missing the #.
$("#carQuestion span").click(function() {
$('span.correct').not(this).removeClass('correct');
$(this).addClass('correct');
});
I do a jsFiddle for you, see here https://jsfiddle.net/xox7kvko/1/
Don't forget use # when you want select a ID
$("#carQuestion span").click(function(){
$("#carQuestion span").removeClass('correct');
$(this).addClass('correct');
});

Switch between divs using radio buttons

I am trying to show-hide div using jquery on click of radio buttons. It might be a weird question to ask but my brain is not digging more and i know that is easy task to do.
Below is HTML
<input type="radio" value="Active Now" class="tabActive" id="active-radio1"
/>Participations
<input type="radio" value="Not Active Now" class="tabNotActive"
id="active-radio2" />
Droppers
<div id="tabActive" class="tab-content">
</div>
<div id="tabNotActive" class="tab-content hide">
</div>
Below is JS
$("input:radio").off().on('click',function()){
var value = $(this).attr("class");
$("#"+value).show();
// I also tried
$("#"+value).toggleClass('hide'); /*Not right way, i know :)*/
$("#"+value+" .tab-content").toggleClass('hide')
});
I am not able to switch between divs due to hide class, but nothing worked
Note: The hide class is being added by framework and i can not modify it.
So, i need a perfect way to show hide these divs.
Try this.
$('input[type=radio]').on('click',function()) {
var id = $(this).attr('class'); // this is very prone to problems
$('.tab-content').addClass('hide')
$('#' + id).removeClass('hide');
});
You can try this one:
$(function() {
$("[name=toggler]").click(function(){
$('.toHide').hide();
$("#blk-"+$(this).val()).show('slow');
});
});
DEMO FIDDLE

jQuery Switch Button On/Off Should Set Different Data-status & Onclick Function

Still learning jQuery and will be thankful for any help.
I am currently using this jQuery Switchbutton https://github.com/olance/jQuery-switchButton
It uses a checkbox as an input type, and creates span tags with labels.
How would I say that I want on_label to have data-status="accept", and off_label data-status="decline"?
HTML:
<input type="checkbox" id="accept-offer"/>
JS:
$("input#accept-offer").switchButton({
on_label: "Accept",
off_label: "Ignore"
});
Thanks!!
You can try to do like this:
$('.switch-button-label.on').data('status','accept');
$('.switch-button-label.off').data('status','decline');
or:
$('.switch-button-label.on').attr('data-status','accept');
$('.switch-button-label.off').attr('data-status','decline');

Highilight a button after pushing javascript

I'm trying to make simple image gallery with html/css and a bit of javascript.It's all up and working, but one function.
I want that when I open the index.html 'All' would be already highlighted by my custom style and if pushed on another button highlight would go to that particular button.
html of a button looks like this
<input type='button' value='Design' class="cat-itiem" id='filterDesign'>
edit: I ended up using OnResolve's method and it worked just fine!(even for someone who doesn't know any JS) Thank you all for help :)
Assuming your highlighted class is called activeButton, you could do the following with jQuery
$(function () {
$(".cat-itemem").click(function () {
$(".cat-itemem").removeClass('activeButton');
$(this).addClass('activeButton');
}
})
I've created an example with jsfiddle for you with simple jQuery. You can see each aspect (markup, css, and jquery).
http://jsfiddle.net/p5ZUv/7/
You can certainly append styles on button click via pure css, but to unhighlight others you need javascript.
HTML:
<input type='button' value='All' class="cat-itiem highlighted" id='filterAll'>
<input type='button' value='Design' class="cat-itiem" id='filterDesign'>
<input type='button' value='Logo' class="cat-itiem" id='filterLogo'>
<input type='button' value='Photography' class="cat-itiem" id='filterPhotography'>
CSS (Add yours)
.cat-itiem{}
.highlighted{background:green}
JS (Jquery is used)
$('.cat-itiem').click(function(){$('.cat-itiem').removeClass('highlighted'); $(this).addClass('highlighted')}

Categories

Resources