We Keep Coding

Multiple toggling buttons and texts with a single function

$(document).ready(function(){
$("button").click(function(){
$("#answer").toggle(1000);
});
});
this only works for the IDs "answer" and "button", the challenge for me its getting multiple pairs of these IDs (answer1 - button1, answer2 - button2, and so on) to work with this single function

You haven't included the relevant HTML so I can only guess/assume what it might look like in my demo/example.
For multiple elements it is best to use a class to group them.
$(document).ready(function() {
$(".answerTog").click(function() {
$(this).prev('.answer').toggle(1000);
});
});
.Question {
display: block;
margin-bottom: 5px;
}
.answer {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Question">
<input type="text" placeholder="Question One" />
<span class="answer">Question One Answer.</span>
<button class="answerTog">See Answer</button>
</div>
<div class="Question">
<input type="text" placeholder="Question Two" />
<span class="answer">Question Two Answer.</span>
<button class="answerTog">See Answer</button>
</div>
<div class="Question">
<input type="text" placeholder="Question Three" />
<span class="answer">Question Three Answer.</span>
<button class="answerTog">See Answer</button>
</div>
If your button is before the answer then you can simply use
$(this).next('.answer').toggle(1000);
$(this) will target the specific element used to trigger the function call, in this instance the button being clicked.
.prev('.answer') will target the previous element with the class name of answer
.next('.answer') will target the next element with the class name of answer
JsFiddle Demo
If you have any questions about the source code above please leave a comment below and I will get back to you as soon as possible.
I hope this helps. Happy coding!

You are currently using an ID property to call that button ($('#')) You want to call them by classes.
IDs should be unique and only used in 1 DOM element.
Trying to use ID the script will only pick the 1st element it comes across; and the code will only work for that one button.
With classes you create an Object for all of your elements, with jQuery you just have to call the element by its class, and run the code normally - I note this because in JS you would have to add the index to the element call.
For example:
<canvas id="main"></canvas>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<script>
var canvas = $('#main'), // return 1 element
elements = $('.elem'); // return 3 elements
</script>
So for anything that involves multiple elements you must call them by class or tag name.
In vanilla JS you would look at something like this:
<script>
var elem = document.querySelectorAll('.elem');
console.log(elem[0]);
</script>
So, your code would then just need to call those elements by class; and you can set custom classes for different purposes.
$(document).ready(function() {
var btns = $('.btn');
btns.click(function() {
btns.toggle(1000);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn">Button</button>
<button class="btn">Button</button>
<button class="btn">Button</button>
<button class="btn">Button</button>
<button class="btn">Button</button>

On Checkbox click show hide div having same class dynamically

I want click on the check box and hide the respective content.
Now in my code all the content with same class gets hidden when I click any one of the checkbox.
Since my front end tags are in apex I do not want to use id, attr, name,value. I want to use class and fix this issue, exactly in the way I have written in this fiddle.
Fiddle link for reference
$('input[type="checkbox"]').click(function() {
if ($(this).is(":checked")) {
$('.div1').hide();
} else {
$('.div1').show();
}
});
<h3 align="center"> This JavaScript shows how to hide divisions </h3>
<form>
<input type="checkbox">Exam1
<div class="div1">I am content1!
</div>
<br>
<input type="checkbox">Exam2
<div class="div1">I am content2!
</div>
<br>
<input type="checkbox">Exam3
<div class="div1">I am content3!
</div>
<br>
<input type="checkbox">Exam4
<div class="div1">I am content4!
</div>
<br>
</form>
https://jsfiddle.net/6ybp2tL6/
Is this possible??
Thanks in advance

Try this instead DEMO
$('input[type="checkbox"]').click(function() {
($(this).is(":checked")) ? $(this).next().hide() : $(this).next().show();
});

Try to hide all the divs with class div1 initially,
$(".div1").hide();
$('input[type="checkbox"]').click(function() {
$(this).next('.div1').toggle(!this.checked); //toggle(false) will hide the element
});
And toggle the visibility of the relevant div element with class div1 by using next() and toggle()
DEMO

Hiding/showing div by selecting dropdown and button click

i want to select a value from my dropdown, and then, when i click a button, it hides certain div and show another div. I'm baffled on how to achieved this. so i have two div.
<div id="div1"> some content </div>
<div id="div2"> some content </div>
#Html.DropDownListFor(model => model.Reference, ViewBag.ISharedUI as SelectList, "-- REFERENCE TYPE -- SHOW ALL", new { #id = "testID" })
and here is my button.
<input type="submit" value="Filter" name="Command" class="btn btn-default" onclick="abc()" />
and this is my function. I try to do it,
function abc() {
if ('#testID' != 1) {
$('#div1').show();
$('#div2').hide();
} else if (testID != 2) {
$('#div1').show();
$('#div2').hide();
} else {
$('#div1').hide();
$('#div2').hide();
}
}
I hope my question is clear.

I am unsure with what you want to do with the value from the dropdown input, but it is not too relevant to affecting the state of the divs if you are only interacting with the button to affect the divs.
In terms just hiding the div, you can apply a class "hidden" that hides the element or not with CSS.
Then you can toggle the div and whether or not it appears by clicking on the button with jQuery by adding and removing that hidden class with the toggleClass.
Let me know if you have any more questions.
$(document).ready(function() {
$(".btn").on("click", function() {
$("#div1").toggleClass("hidden");
$("#div2").toggleClass("hidden");
})
})
.hidden {
display: none;
}
<div id="div1"> some content </div>
<div id="div2" class="hidden"> some content </div>
<input type="submit" value="Filter" name="Command" class="btn btn-default" onclick="abc()" />

getting input box value undefined in alert box

I want to get input field value. Only based on class and id name.
I am getting undefined in alert box.
Not getting any value which i have entered in input box.
HTML
<div id="tab1" class="tab-pane active">
<div class="input-text">
<div class="input-append">
<input id="textData" class="input-xxlarge" type="text" name="inputName" />
<button id="pressme" class="btn btn-success btn-large" type="button">Convert</button>
</div>
</div>
</div>
JS
$('#pressme').on({
'click': function () {
var data = $(".tab-pane active #textData").val();
alert(data);
}
});

.tab-pane active looks for an <active> element inside of an element with a class of tab-pane. The correct selector for an element with those two classes would be .tab-pane.active., but since your element has an id, just select it using an id selector:
$("#textData").val();

You can use the selector as your text box id enough
var data = $("#textData").val();

Your selector is incorrect as the div has both classes, so you need to join them together like this:
var data = $(".tab-pane.active #textData").val();
Note that id selectors should be unique, so in effect the class selector is redundant anyway.

It will be like
$('#pressme').on({
'click': function () {
var data = $(".tab-pane.active #textData").val();
alert(data);
}
});
Makesure that you have enclosed it on DOM ready

TRY THIS:
$('#pressme').on('click',function () {
var data = $("#textData").val();
alert(data);
});

Want to make inactive hyperlink

I have problem in hide and show the div element.
In this scenario when user click on the year the respect content is shown.
Problem I want to inactive hyperlinking on respective year when it is opened.
The script and html is below;
for this I have tried .preventDefault(). but not got any success:
<script type="text/javascript" >
$(document).ready(function() {
$("div.new:gt(0)").hide();// to hide all div except for the first one
$("div[name=arrow]:eq(0)").hide();
// $("div.nhide:gt(0)").hide();
// $("a[name=new]").hide();
$("a[name=new]").hide();
$('#content a').click(function(selected) {
var getID = $(this).attr("id");
var value= $(this).html();
if( value == '<< Hide')
{
// $("#" + getID + "arrow").hide();
$("a[name=new]").hide();
$("#" + getID + "_info" ).slideUp('slow');
$("div[name=arrow]").show();
$("div.new").hide();
$(this).hide();
// var getOldId=getID;
// $("#" + getID ).html('<< Hide').hide();
}
if($("a[name=show]"))
{
// $("div.new:eq(0)").slideUp()
$("div.new").hide();
$("div[name=arrow]").show();
$("a[name=new]").hide();
$("#news" + getID + "arrow").hide();
$("#news" + getID + "_info" ).slideDown();
$("#news" + getID ).html('<< Hide').slideDown();
}
});
});
</script>
The html code is below:
<div id="content">
<div class="news_year">
<a href="#" name="show" id="2012">
<div style="float:left;" name="year" id="news2012year">**2012** </div>
<div style="float:left;" name="arrow" id="news2012arrow">>></div>
</a>
</div>
<div class="new" id="news2012_info">
<div class="news">
<div class="news_left">News for 2012</div>
</div>
<div class="nhide" ><< Hide </div>
</div>
<div id="content">
<div class="news_year">
<a href="#" name="show" id="2011">
<div style="float:left;" name="year" id="news2012year">2012 </div>
<div style="float:left;" name="arrow" id="news2012arrow">>></div>
</a>
</div>
<div class="new" id="news2011_info">
<div class="news">
<div class="news_left">News for 2011</div>
</div>
<div class="nhide" ><< Hide </div>
</div>
Fiddle

if i am understanding your problem,
event.preventDefault(); not works with all browser so if you are using other browser like IE
then use event.returnValue = false; instead of that.so you can detect your browser using javascript as
var appname = window.navigator.appName;

This is what I'm currently using in my projects to "disable" an anchor tag
Disabling the anchor:
Remove href attribute
Change the opacity for added effect
<script>
$(document).ready(function(){
$("a").click(function () {
$(this).fadeTo("fast", .5).removeAttr("href");
});
});
</script>
Enabling the anchor:
$(document).ready(function(){
$("a").click(function () {
$(this).fadeIn("fast").attr("href", "http://whatever.com/wherever.html");
});
});
Original code can be found here

Add a class called 'shown' to your wrapper element when expanding your element and remove it when hiding it. Use .hasClass('shown') to ensure the inappropriate conditional is never executed.

Surround the code inside of the click function with an if statement checking to see if a variable is true or false. If it is false, it won't run the code, meaning the link is effectively inactive. Try this..
var isActive = true;
if (isActive) {
// Your code here
}
// The place where you want to de-activate the link
isActive = false;
You could also consider changing the link colour to a grey to signify that it is inactive.
Edit
Just realised that you want to have multiple links being disabled.. the code above will disable all of them. Try the code below (put the if around the code in the click function)
if(!$(this).hasClass("disabled")) {
// Your code here
}
// The place where you want to de-activate the link
$("#linkid").addClass("disabled");
// To re-enable a link
$("#linkid").removeClass("disabled");
// You can even toggle the link from disabled and non-disabled!
$("#linkid").toggleClass("disabled");
Then in your CSS you could have a declaration like this:
.disabled:link {
color:#999;
}