We Keep Coding

jQuery .slideToggle() to also close other tabs

I have two sections, each with 3 divs, opening on slideToggle. How can I close the other 2 divs in each section when 1 is open?
https://jsfiddle.net/koteva/mdx20uqe/2/
<div id="stage1">
<h2 id="location-1">Location</h2>
<div id="location-1t">grjryjj</div>
<h2 id="jersey-1">JERSEY </h2>
<div id="jersey-1t" style="display: none;"> ighlgkiuluil </div>
<h2 id="details-1">details</h2>
<div id="details-1t" style="display: none;">fykyuk </div>
</div>
<div id="stage2">
<h2 id="location-2">Location2</h2>
<div id="location-2t">grjryjj</div>
<h2 id="jersey-2">JERSEY2 </h2>
<div id="jersey-2t" style="display: none;"> ighlgkiuluil </div>
<h2 id="details-2">details2</h2>
<div id="details-2t" style="display: none;">fykyuk </div>
</div>

With your jsFiddle, you could replace all your js code with
$('h2').click(function(event){
var $this = $(event.target),
id = $this.attr('id');
if($('#'+id+'t').is(':visible')){ // To not slide up and down if clicking an already open element.
$this.parent().children('div').slideUp();
} else {
$this.parent().children('div').slideUp();
$('#'+id+'t').slideToggle();
}
});
as seen in this jsFiddle. This hides the content inside the same stage when you click a header, assuming you follow the same naming convention throughout your entire html code.
I would however recommend, if you can, to perhaps clean up your html a little.
Look at this jsFiddle for an example.
Unless your code has to have your current structure, I would recommend refactoring it into using similar classes and as such be able to write cleaner code.
$('.header').click(function(event){
var $this = $(event.target);
$this.siblings().slideToggle();
$this.parent().siblings().children('.content').slideUp();
});
Would with the structure in the jsFiddle html provide you with the functionality you want.

If you want to do it in simple way. You can do it as follows. its just one function written. But it is simple and line of code will be increased
$( "#details-2" ).click(function() {
$( "#location-2t").hide( "slow");
$( "#jersey-2t").hide( "slow");
$("#details-2t").show("slow");
});
For more complex div structure and the Ids are in the same format as you have specified in your sample code following code will be very useful.
<script>
$(document).ready(function(){
$("div h2").click(
function() {
var thisId = $(this).attr("id");
$("#"+thisId+"t").show("slow");
$(this).siblings("div").not($("#"+thisId+"t")).hide("slow");
});
});
</script>

Substitute Anchor code with Javascript Array

Yes, I want to replace a simple anchor link with a javascript array code. We're doing it the long (and possibly complicated) way over here. I figured it would be a simple scrollTo property but I still cant get the page to scroll or jump anywhere else on the page.
Can someone tell me if I'm doing something horribly wrong?
Here is the javascript.
$(function(){
//Search index for Cards
var gameA = new Array('normal','ex','promo','counterfeit');
$('#go').click(function(e){
var term = $('#term').val();
var searchIndex = gameA.indexOf(term);
console.log(term);
console.log(searchIndex);
if (searchIndex > -1){
console.log("hi");
window.scrollTo(0,"#sec"+searchIndex);
}
});
});
And here is my source code.
<h2 id="top">Select a Term</h2>
<p>List: Normal, Ex, Promo, Counterfeit</p>
<form action="javascript:void(0)">
<label for"term">Enter a term from the list above.</label><br>
<input type="text" id="term" name="term">
<button id="go">Go</button>
</form>
</div>
<br><br>
<img src="images/fancycards.jpg" width="1191" height="670" alt="fancy cards"><br>
<h2 id="sec0">Normal Cards</h2>
<p>Back to Top</p>
<img src="images/cards.jpg" width="1131" height="707" alt="cards"><br>
<h2 id="sec1">Ex Cards</h2>
<p></p>
<img src="images/excards.jpg" width="1000" height="653" alt="ex cards"><br>

It looks like window.scrollTo takes coordinates for both arguments, rather than an element's ID.
Try the following in place of your current scrollTo command:
window.scrollTo(0, $("#sec"+searchIndex).offset().top)
Here's a JSFiddle example that includes this change. The images obviously won't show up, but it does scroll properly: http://jsfiddle.net/1mpqm1te/1/

You need to pass a number to the scrollTo() function, not a string. This would be the Y offset of the element you want to scroll to. Here is an updated version! If we give the card sections semantically sensical ID values ('normal-cards', 'ex-cards', etc), we can easily make this happen!
http://jsfiddle.net/yLvhh53a/
$(function () {
//Search index for Cards
var gameA = new Array('normal', 'ex', 'promo', 'counterfeit');
$('#go').click(function (e) {
var term = $('#term').val();
console.log(term);
var item = $('#' + term + '-cards');
console.log(item);
$('html, body').animate({
scrollTop: item.offset().top
}, 1000);
});
});
<h2 id="top">Select a Term</h2>
<p>List: Normal, Ex, Promo, Counterfeit</p>
<form action="javascript:void(0)">
<label for "term">Enter a term from the list above.</label>
<br>
<input type="text" id="term" name="term">
<button id="go">Go</button>
</form>
</div>
<br>
<br>
<img src="images/fancycards.jpg" width="1191" height="670" alt="fancy cards">
<br>
<h2 id="normal-cards">Normal Cards</h2>
<p>Back to Top
</p>
<img src="images/cards.jpg" width="1131" height="707" alt="cards">
<br>
<h2 id="ex-cards">Ex Cards</h2>
<p></p>
<img src="images/excards.jpg" width="1000" height="653" alt="ex cards">
<br>
This way, you don't even need to reference an array. For every section you add, just ensure it has a consistent ID '[name]-cards' and it will automatically find it. You can also change the scroll speed if you'd like.

When scrolling to an element with an id. You can simply just change the hash of the url and that's it.

Scroll to a specific <img> or <a> tag when I hit the search button on my website

As the title says, I want the page to scroll down to an image when I search for it on my search bar.
This is the HTML for the search bar/button:
<form id="search-form" href="#test1" class="smoothscroll">
<input type="text" id="searchText"/>
<input type="button" value="Search" id="searchButton"/>
</form>
This is the <img> and <div> tag I'm trying to scroll to:
<a href="test1.html" style="text-decoration: none">
<img src="pic1.png" height="150px" width="150px"/>
<img src="pic2.png" id="id1"/>
</a>
And here is my jQuery:
$(document).ready(function () {
$( "#searchButton" ).click(function() {
//var text = document.getElementById('searchText').value;
$( "html, body" ).animate({
scrollTop: ($('#test1').offset().top)
}, 2000);
});
});
I keep getting this error message:
Uncaught TypeError: Cannot read property 'top' of undefined
Thanks for helping :)

add id="test1" to your required image. or use $("a[href*='test1']:first").offset().top

There is no $('#test1') in your HTML. The jQuery selector #test1 looks for an element with an id of "test1". Try adding that id to your a:
<a id="test1" href="test1.html" style="text-decoration: none">
Also, I don't think href="#test1" is a valid attribute for a form tag. It's not being used for anything, so you probably don't need it. (The form's class attribute is also probably superfluous, and could technically be invalid. You'll want to validate your markup to make sure of these things.)

Please add "id=1" to any of your images.

You should add an ID to that anchor, otherwise you could technically do:
$('a[href="test1.html"]')
I'd still recommend giving it an id="test1'

Test if $("#test1").length is > 0 before the animate() call. This could just be fixing the symptom and not the underlying problem though.

You want something like this.
HTML:
<form id="search-form" href="#test1" class="smoothscroll">
<input type="text" id="searchText"/>
<input type="button" value="Search" id="searchButton"/>
</form>
<a style="margin-top: 1000px; display: inline-block;" href="test1.html" style="text-decoration: none">
<img src="pic1.png" id="image1" />
<img src="pic2.png" id="image2"/>
</a>
JS:
$(document).ready(function () {
$( "#searchButton" ).click(function() {
var text = $('#searchText').val().toLowerCase();
$( "html, body" ).animate({
scrollTop: ($('#'+text).offset().top)
}, 2000);
});
});
Here is the JsFiddle. I've added a large margin to the <a> link to see the scrolling effect.

resize two elements simultaneously using jquery/js

i have been trying to resize two windows simultaneously but for some reason it doesnt work.
i tried to catch errors but nothing.
Note: i dont want to use jquery resize since it doesnt have a fast inteval for checking resizes
JAVASCRIPT:
function _u(e){
try {
e.parent('.boss').find('.first').width( e.width() ); //tried with parent('.boss').next('.first') or directy with prev('.first')
} catch(err){alert(err);}
}
$(document).ready(function(){
$(".data").each(function(){
var resizerint;
$(this).mousedown(function(){
try {
var eee = $(this);
var resizerint = setInterval(function(){
try {
_u( eee );
} catch(err){alert(err);}
},10); // i need it 10ms
} catch(err){alert(err);}
$('.test').html('<font style="position:absolute;top:0;right:0;color:red;"> mouse DOWN </font>');
}).mouseup(function(){
try{
clearInterval(resizerint);
} catch(err){alert(err);}
$('.test').html('<font style="position:absolute;top:0;right:0;color:green;"> mouse UP </font>');
});
});
});
and HTML:
<div class="boss">
<div class="first">
<table>
<tr>
<td>
<div class="title">ONEEEEE</div>
</td>
</tr>
</table>
</div>
<div class="second">
<textarea class="data" > ONEEE TEXTY TESTY NJAMMM! </textarea>
</div>
</div>
<div class="boss">
<div class="first">
<table>
<tr>
<td>
<div class="title">TWOOOOOO</div>
</td>
</tr>
</table>
</div>
<div class="second">
<textarea class="data" > TWOOO TEXTY TESTY NJAMMM! </textarea>
</div>
</div>
<div class="text"></div>
Thank you in advance for any help you can provide.
JSFIDDLE (IF YOU SEE , THE BLUE DOESNT RESIZE WHEN MOUSEDOWN at the TEXTAREA )
http://jsfiddle.net/2sfFW/

My first answer was that there was a missing "$" but it didn't fix the problem.
Got it working to some extent, but you have to click into the text field first before it will initialize. I used your blue version as a visualizer.
The proper jquery traversal is
e.parent().parent('.boss').find('.first')
or
e.parents('.boss').find('.first')
You have to use the plural version because there are two parent divs above it. Using parent().parent() is more specific but probably not necessary in this case.
http://jsfiddle.net/aQKVD/1/
If you remove the mouseup/mousedown handlers it will initialize at document.ready instead, which I think might be what you want. You don't necessarily need to do the clearing of the variable unless you have some other need for it, since .each() creates a separate instance of the function tied to the specific div in question. Here's a version like that:
http://jsfiddle.net/aQKVD/2/

Doesn't fix it in JSfiddle, but for starters you've left off a "$". I've set up a JSfiddle link so other people can try it. http://jsfiddle.net/aQKVD/
function _u(e){
try {
e.parent('.boss').find('.first').width( e.width() ); //tried with parent('.boss').next('.first') or directly with prev('.first')
} catch(err){alert(err);}
}
$(document).ready(function(){
(".data").each(function(){
last line should be
$(".data").each(function(){

how to hide/remove all text in-between two elements?

lets say i have this lump of HTML:
<div class="container">
<span class="title">Heading 1</span>
This is a description..<br />
This is the second line..
<div class="image"><img src="image.jpg" /></div>
</div>
What i want to do using jQuery/JavaScript is hide/remove all text and elements between <span class="title"> and <div class="image">.
I've looked all over and found pretty much nothing. Any ideas on how i could do this?

How about something like this? http://jsfiddle.net/ZW8q2/1
var foo = $('.container').children(':not(br)');
$('.container').html('').html(foo);

You could try:
var str = $('.container .title').text() + $('.container .image').html();
$('.container').html(str);
JS Fiddle.

Try this:
Place a tag around what you want to hide, give div an ID name. So in the end your will look like:
<div id = "hideMe" style ="display:block">...Your Content...</div>
Use this javascript:
function hide()
{
document.getElementById('hideMe').style.display = "none";
return;
}
Have the Javascript function called whenever you want to hide the stuff between the div from a button (or other control) like this:
<input type= "submit" onclick ="hide()">