Develop Reference

Use anchors in "Select" drop down list

Alright, so I have a currently functioning drop down list that displays a hidden div of content on the same page when that items is selected from the dropdown. The problem is I need to be able to have this same code as an anchor or something that will allow me to call up that particular section either when referencing that page from another page or by simply navigating back to the page after having moved forward in the content.
Here is the script:
<script type="text/javascript">`
jQuery(function($) {
$('.box').hide();
$('#option1').show();
$('#category_select').change(function () {
$('.box').hide();
$('#'+$(this).val()).show();
});
});
</script>
And my page content:
<div id="mental_lever_collection">
<div class="menu"><span class="title">Choose a Mental Lever Collection</span>
<select id="category_select" class="select">
<option value="#option1">Mental Levers & Leveraged Thinking</option>
<option value="#option2">Zero Aggression Basics</option>
</select></div>
<div id="option1" class="box">
Some Content
</div>
<div id="option2" class="box">
Some Content
</div>
</div>
If you have any ideas on how to tweak this to get the desired effect it would be greatly appreciated.

Fiddle Demo
Try this
$(document).ready( function() {
$('.box').hide();
$('#option1').show();
$('#category_select').change(function () {
$('.box').hide();
var test = $(this).val();
console.log(test);
$(test).show();
});
});

There is an extra '#' in your code.
Please change $('#'+$(this).val()).show(); to $($(this).val()).show();
Hope this help you to solve the problem :
Full jquery code
<script type="text/javascript">`
jQuery(function($) {
$('.box').hide();
$('#option1').show();
$('#category_select').change(function () {
$('.box').hide();
$($(this).val()).show();
});
});
</script>

Javascript links stopped working, can't figure out why

I have a website that is using js to switch between two different navigation menus. It has always worked up until a week ago or so and I can't figure out why. Wondering if anyone here can point something out to me that I'm not seeing.
Here's my markup:
<div class="catMenu">
Works
</div>
<div class="newboxes" id="newboxes1" style="display:block;" >
...the 1st menu
</div>
<div class="catMenu2">
<a href="javascript:showonlyone('newboxes2');" >About</a>
</div>
<div class="newboxes" id="newboxes2" style="display:none;">
...the 2nd menu
</div>
And Here's my js:
$(document).ready(function() {
function showonlyone(thechosenone) {
$('.newboxes').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show();
}
else {
$(this).hide();
}
});
}
});
When I look at my console using firebug, I get the following error:
ReferenceError: showonlyone is not defined
but with my lack of knowledge about js, I'm not entirely sure how to fix this.
Can anyone shed some light?

If you're going to invoke the showonlyone function using href="javascript:showonlyone()" you'll have to define it in the global scope, currently it's defined inside your document.ready() function.
You can also expose it explicitly using the window keyword:
$(document).ready(function() {
window.showonlyone = function showonlyone(thechosenone) {
$('.newboxes').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show();
}
else {
$(this).hide();
}
});
}
});

Building on haim770's answer
function showonlyone(thechosenone) {
$('.newboxes').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show();
}
else {
$(this).hide();
}
});
}
$(document).ready(function() {});

Try this:
$(document).ready(function() {});
function showonlyone(thechosenone) {
$('.newboxes').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show();
}
else {
$(this).hide();
}
});
}

You're using jQuery, so move your inline JavaScript out of your HTML and use a data attribute to store thechosenone variable. Then you can use jQuery to add click methods to your anchors, grab the variable from the data attribute and run the rest of the code.
HTML
<div class="catMenu">
<a data-chosen="newboxes1">Works</a>
</div>
JS
$(document).ready(function() {
$('a').click(function () {
var thechosenone = $(this).data('chosen');
$('.newboxes').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show();
} else {
$(this).hide();
}
});
});
});
DEMO

While your format is close to working and haim770 has already shown the problem, I would change your format a bit, here. Try this:
<div class="catMenu">
<a id="LinkNewBoxes1" class="ToggleDisplay">Works</a>
</div>
<div class="newboxes" id="NewBoxes1" style="display:block;" >
...the 1st menu
</div>
<div class="catMenu2">
<a id="LinkNewBoxes2" class="ToggleDisplay" >About</a>
</div>
<div class="newboxes" id="NewBoxes2" style="display:none;">
...the 2nd menu
</div>
$(document).ready(function() {
$(".ToggleDisplay").click(function(e){ //Event Handler for ToggleDisplay clicks
var BoxToDisplay = $(this).prop("id").replace("Link", ""); //Removes 'Link' from anchor tags ID and assigns to variable
$(".newBoxes").each(function(){
if ($(this).prop("id") == BoxToDisplay) //Check if this is the right one to display
$(this).show();
else
$(this).hide();
});
e.preventDefault(); //Prevent browser's default action for anchor clicks
return false;
});
});

Thanks Andrew!
HTML
<div class="catMenu">
Works
</div>
<div class="newboxes" id="NewBoxes1" style="display:block;" >
...the 1st menu
</div>
<div class="catMenu2">
<a href='#' id="LinkNewBoxes2" class="ToggleDisplay" >About</a>
</div>
<div class="newboxes" id="NewBoxes2" style="display:none;">
...the 2nd menu
</div>
JS
$(".ToggleDisplay").click(function(e){
var BoxToDisplay = $(this).prop("id").replace("Link", "");
$(".newboxes").each(function(){
//Check if this is the right one to display
if ($(this).prop("id") == BoxToDisplay)
$(this).show();
else
$(this).hide();
});
e.preventDefault();
return false;
});
FIDDLE

Trying to make hidden div fade in on click

I'm looking for some help with fading hidden div's in.
This is what I have so far, but it doesn't seem to want to work, the div just appears with no fade.
$("div").hide();
// Show chosen div, and hide all others
$("a").click(function (e)
{
//e.preventDefault();
$("#" + $(this).attr("class")).show().siblings('div').hide();
});
$('.one').click(function(){
$("#one").fadeIn("5000");
});
html
<body>
One
Two
Three
Four<br /><br />
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div><br/><br/>
</body>

Just click event on alike this:
$("div").hide();
// Show chosen div, and hide all others
$("a").click(function (e) {
//e.preventDefault();
$("#" + $(this).attr("class")).fadeIn(5000).siblings('div').hide();
});
Fiddle

setTimeout(function() {
$("#one").css('display','none');
}, 5000);

Try this.
$("body").on('click', '#button-hide' function(e){
$("#" + $(this).attr("class")).show().siblings('div').hide();
})
$("body").on('click', '#button-show' function(e){
$("#one").fadeIn("5000");
})
For best answers, please explain more detail you problem. Include the context and example.
Salute!

you don't see the change because "One" is staying on the same position. Try to hide it first, then you can fadeIn
$('.one').click(function(){
$("#one").hide().fadeIn("5000");
});

JS slidetoggle on UL Tree

When i click on second item with slideToggle, first item close.
$(function() {
$('.toggleSitemap').find('ul').css('display','none')
$('.toggleSitemap').click(function(){
$(this).parent().find('ul').slideToggle('slow');
});
});
http://jsfiddle.net/qHZsZ/2/

I dont know how much will this help you. I also needed to implement accordian(toggle) in my MVC project once, and I used something like this:
View.aspx:
<div class='toggle' style="float: left">
<div style="float: left;clear:both;">
<br />
<span class="ulGroup" jqattr="<%:Group.Key %>" style="font-weight: bold;font-color: black;cursor: pointer"><img src="<%: Url.Content("~/Images/imageplus.gif")%>"/>
<%:Group.Key%></span>
</div>
<div class="togglebox" style="clear:both;" >
<!-- Write contents as you wish -->
<!-- as
<ul> test
<li>Test1></li>
<li>Test2></li>
<li>Test3></li>
</ul>
.
.
.
-->
</div>
</div>
And called a design.js (javascript file) as :
$(document).ready(function () {
//Hide the tooglebox when page load
$(".togglebox").hide();
//slide up and down when click over span
$(".ulGroup").click(function () {
var valueText = $(this).attr('jqAttr');
// slide toggle effect set to slow you can set it to fast too.
var x = $(this).parent().next(".togglebox").css("display");
if (x == "block") {
$(this).text('');
$(this).append($('<img src="../../Images/imageplus.gif"/>'))
$(this).append(' ' + valueText);
}
else {
$(this).text('');
$(this).append($('<img src="../../Images/imageplus.gif"/>'))
$(this).append(' ' + valueText);
}
$(this).parent().next(".togglebox").slideToggle("fast");
return true;
});
});

You're pretty close. I think the key ingredient you're missing is to prevent propagation of the click event.
Also, to make it a little less quirky, you only want the click event to fire if the target's direct parent has the toggleSitemap class.
$(function() {
$('.toggleSitemap').click(function(e){
if ($(e.target).parent().hasClass('toggleSitemap')) {
e.stopPropagation();
$(this).children('ul').slideToggle('slow');
}
});
});
Here's an example: http://jsfiddle.net/DkbNA/2/

Slide Up/Down with jQuery

I need to slide up/down or just show and hide div but it's not working. My code:
<div class="facilities">
<div id="facheader">
<div class="facheadname">
Facilities
</div>
<div class="facheaderbutton">
△
</div>
</div>
<div id="factable">
<table border="0">
<tr><div class="factableheader">
<th>Name</th><th>City</th><th>Country</th><th>Compliance Certification</th><th>Audit History</th><th>Date</th><th>Remediation History</th><th>Date</th></div>
</tr>
<tr>
<td>Kowloon</td><td>Hong Kong</td><td>Hong Kong</td><td>cGMP-FDA</td><td>Compliant cGMP-SeerPharma</td><td>12/12/10</td><td>Clean room staff training – IRB-C</td><td>01/03/05</td>
</tr>
</table>
</div>
</div>
I tried code - it's hiding content but not showing when pressed again:
$('#facheader').click(function(){
if ($('#factable').is(':hidden')){
$('#factable').show();}
else{
$('.contclickedinfo').hide();
}
return false;
});
$('#factable').click(function(e) {
e.stopPropagation();
});
$(document).click(function() {
$('#factable').hide();
});
I also tried these but they are not working at all:
$(document).ready(function(){
$('#facheader').click(function(){
$('#factable').slideUp(), function(){
$('#factable').slideDown();
});
});
and
$('#facheader').toggle(function(){
$('#factable').slideUp(800); // Text slides up
}, function(){
$('#factable').slideDown(800); // Text slides down
});

Short with toggle function
$("#facheader").click(function(){
$("#factable").slideToggle(); /* between () you can define speed in MS */
});
Because it's not a link that triggers the slide, you don't need to return false or stopPropagation.
Something which is strange is:
<tr><div class="factableheader">
When browsers see this, they will put your outside your table.
Are you using multiple DIV's with the same ID?

$('#facheader').click(function() {
if ($('#factable').is(':visible'))
$('#factable').slideUp(800); // Text slides up
else
$('#factable').slideDown(800); // Text slides down
});

$('#facheader').click(function() {
if ($('#factable').is(':visible')){
$('#factable').hide();
} else {
$('#factable').show();
}
return false;
});
That should work just the way you want to. I changed the element you wanted to hide, because you picked a different element. Besides, the :visible selector has served me better than :hidden. I'm not sure why :hidden doesn't always work the way we expect it to work.