We Keep Coding

Is threre any better way to accomplish this using jquery?

I am trying to hide all elements when one button is clicked and only the menu belonging to that specific button should appear.
If I do like this that will be too long if more buttons and menus are there.
Are there any methods that can shorten this and get the desired result?
$(document).ready(function(){
$("#steps").click(function(){
$("#calculateMenu").hide();
$("#stepsMenu").show();
});
$("#calculate").click(function(){
$("#stepsMenu").hide();
$("#calculateMenu").show();
});
});

You could do it like this:
$("#steps,#calculate").click(function() {
var id = $(this).attr("id");
$("[id*=Menu]").hide();
$("#" + id + "Menu").show();
});
All element where id contains Menu will be hidden, and then we will show the "correct" element
Demo
$("#steps,#calculate").click(function() {
var id = $(this).attr("id");
$("[id*=Menu]").hide();
$("#" + id + "Menu").show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="steps">steps</button>
<button id="calculate">calculate</button>
<div id="stepsMenu">stepsMenu</div>
<div id="calculateMenu">calculateMenu</div>

When one button is clicked and the only menu belonging to that specific
button should appear
As #freedomn-m 's comment,
You can use data-attributes to link between button and menu combined with class selector like below:
$(".Mybutton").click(function() {
var activeMenu = $(this).data('buttonname');
$(".menu").hide();
$("#" + activeMenu).show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class='Mybutton' data-buttonname='steps'>steps</button>
<button class='Mybutton' data-buttonname='calculate'>calculate</button>
<button class='Mybutton' data-buttonname='finish'>finish</button>
<div class='menu' id="steps">stepsMenu</div>
<div class='menu' id="calculate">calculateMenu</div>
<div class='menu' id="finish">finishMenu</div>

Changing 'href' using JS/jQuery not working on the first click

Having this simple HTML:
<a id="show-modal-button" class="circle modal" href='#' >
<i class="fa fa-plus circle-inner-icon"></i>
</a>
And this script.
<script type="text/javascript">
window.addEvent('domready', function()
{
$('show-modal-button').onclick = function(ev) {
ev.preventDefault();
modalUrl = 'http://www.google.es'
$('show-modal-button').href = modalUrl;
console.log($('show-modal-button').href);
return false;
});
});
</script>
It doesnt work on the first click. The modal opens on the first click but nothing is shown (blank modal). If I close the modal and click on the buttom again, the modal shows the href page (in the example above, google) correctly.
I've read some other threads with the same problem and people solve it adding return false; but I add that line and still doesnt work.
The console.log prints the correct url on the first click.. I also tested with $('show-modal-button').addEvent('click', function (ev) { with no luck :(
Any ideas how to make this work on the first attemp?

In addition to other comments :
Selecting elements with their id in jquery is done by prepending "#" to the id
Changing an element's attribute in jquery is done by using the function attr(name, value)
Inside your click function, you can refer to your jquery element by using $(this)
See this working snippet :
$(function(){
$("#show-modal-button").click(function(e){
e.preventDefault();
var modalUrl = 'http://www.google.es';
$(this).attr('href', modalUrl);
console.log($(this).attr('href'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="show-modal-button" class="circle modal" href='#' >
<i class="fa fa-plus circle-inner-icon">show modal</i>
</a>

try this..
<script type="text/javascript">
$(function(){
$('show-modal-button').click(function(ev) {
ev.preventDefault();
modalUrl = 'http://www.google.es'
$('show-modal-button').href = modalUrl;
console.log($('show-modal-button').href);
return false;
});
});
</script>

How to get title of onclick button inside javascript function once it is clicked?

I got few onclick buttons inside li . I wonder how I can get the title of each button inside JavaScript function once it is clicked ?I want to set the title of button equal to a variable.Thanks in advance.
<javascript>
function MyFunction(MyFile,MyImage){
//here i want to get the title of onclick button which is Mango and set it equal to variable.
}
</javascript>
<li><a id="123456" onclick="setCurrentID('123456');javascript:MyFunction('type=fruit&day=friday','http://somesite.com/Image1.png');">Mango</a><img src="http://www.somesite.com/123456.png"></li>
<li><a id="123457" onclick="setCurrentID('123457');javascript:MyFunction('type=fruit&day=friday','http://somesite.com/Image2.png');">Apple</a><img src="http://www.somesite.com/123457.png"></li>

You send the id with the onclick function and then you reference the label via:
document.getElementById("myBtn").text;
So basically:
<a id="1" onClick="reply_click(this.id)">B1</a><br />
<a id="2" onClick="reply_click(this.id)">B2</a><br />
<a id="3" onClick="reply_click(this.id)">B3</a>
<script type="text/javascript">
var newText = 'Thank You';
function reply_click(clicked_id)
{
alert(document.getElementById(clicked_id).text);
document.getElementById(clicked_id).text = newText;
}
</script>
Edit: Apologies, didn't see you were using anchors instead of buttons as your question mentions, my fault. I also added how to change the text.

Do not use inline-event-binding.
Use innerHTML, it will return HTML/Text content (inner) of an element.
$(SELECTOR).next() will grab the next element...attr() will return specified attribute of the element.
Try this:
var CurrentID;
$('li a').on('click', function(e) {
e.preventDefault();
setCurrentID(this.id);
MyFunction('type=fruit&day=friday', $(this).next('img').attr('src'), this.innerHTML);
});
function setCurrentID(id) {
CurrentID = id;
}
function MyFunction(MyFile, MyImage, MyTitle) {
alert('MyFile: ' + MyFile + ' MyImage: ' + MyImage + ' MyTitle:' + MyTitle)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul>
<li><a id="123456">Mango</a>
<img src="http://www.somesite.com/123456.png">
</li>
<li><a id="123457">Apple</a>
<img src="http://www.somesite.com/123457.png">
</li>
</ul>
Fiddle here

Jquery Show Hide with attribute

How to get value from custom attribute to be used in if else condition?
I want to switch button between show & hide . if show button clicked it will hiden and the hide button showed. And also the same for opposites.
So i can do show hide for my divs.
Here's my codes
<div class="wrapper">
<a class="show_detail" target="1" style="display:block">+ Show</a>
<a class="hide_detail" target-hide="1" style="display:none">- Hide</a>
<div class="event_down" id="event_down1" style="display:none">
Content 1
</div>
<a class="show_detail" target="2" style="display:block">+ Show</a>
<a class="hide_detail" target-hide="2" style="display:none">- Hide</a>
<div class="event_down" id="event_down2" style="display:none">
Content 2
</div>
<a class="show_detail" target="3" style="display:block">+ Show</a>
<a class="hide_detail" target-hide="3" style="display:none">- Hide</a>
<div class="event_down" id="event_down3" style="display:none">
Content 3
</div>
</div>
CSS:
.show_detail{cursor:pointer; color:red;}
.hide_detail{cursor:pointer; color:red;}
JS :
$('.show_detail').click(function(){
var atribut_show = $('.show_detail').attr('target');
var atribut_hide = $('.hide_detail').attr('target-hide');
if (atribut_show == atribut_hide){
$('.hide_detail').show();
$(this).hide();
}
$('.event_down').hide();
$('#event_down'+$(this).attr('target')).show();
});
and here's MY FIDDLE need your help to solve it.

in order to get custom attributes their name must start with "data-". For example your custom attribute target would be "data-target". After that you can get them using something like $("#myElement").getAttribute("data-target").

You are getting object array list you have to get only the current object
Check updated fiddle here
"http://jsfiddle.net/p7Krf/3/"
$('.show_detail').click(function(){
var atribut_show = $(this).attr('target');
$('.hide_detail').each(function(element){
if($(this).attr("target-hide")==atribut_show){
$(this).show();
}
});
$(this).hide();
$('#event_down'+atribut_show).show();
});

The following javascript made it function for me. You should however consider calling your attributes data-target and data-target-hide as your specified attributes are not actually valid. It will function, but you could run into problems if you don't change the attribute names.
$('.show_detail').click(function(){
var atribut_show = $(this).attr('target');
$('.hide_detail[target-hide="'+atribut_show+'"]').show();
$(this).hide();
$('#event_down'+atribut_show).show();
});
$('.hide_detail').click(function(){
var atribut_hide = $(this).attr('target-hide');
$('.show_detail[target="'+atribut_hide+'"]').show();
$(this).hide();
$('#event_down'+atribut_hide).hide();
});

Get the value of text field using jquery

I have this html code
<div class="sub-middle-column">
<div class="div-header">Grandsire
<a "#", class="table-control-focus sub-header-table-focus" id="table-control-focus-t" >abc</a>
<ul class="table-controls hide side-action-items">
<li>
<a data-remote="true" data-box-no="1" class="find_or_add_horse" href="#">Find/Add Horse</a>
</li>
<li>
Go to the Next Horse
</li>
</ul>
</div>
<input type="text" name="search" id="search" class="search_horse">
</div>
on clicking on find_or_add_horse link I want to get the value of the text field using jquery. I tried parent, child and closest but could not get the result. How can I get the value of text field?
$(document).on('click', '.find_or_add_horse', function(){
// on clicking on find/add horse link I need the value of text field here
});

http://jsfiddle.net/jFIT/pyPtW/
You can use parents to find the root element, then use find on that element to get the input.
console.log($(this).parents('.sub-middle-column').find('.search_horse').val());

Try this
$(document).on('click', '.find_or_add_horse', function(){
var value = $('#search').val();
});
JsFiddle

use .val():
$(document).on('click', '.find_or_add_horse', function(){
alert($('#search').val());
});
if you have multiple sub-middle-column div then try this:
$(document).on('click', '.find_or_add_horse', function(){
alert($(this).closest('.sub-middle-column').find('.search_horse').val());
});

You can try the code below
$(document).on('click', '.find_or_add_horse', function(){
var textValue= $('#search').val();
});

.val(); is for input fields, .text() for other html containers like p, div..
AND dont forget to $.trim(); the input, cos hopefully you dont want whitespaces around the input text
try this:
$(document).on('click', '.find_or_add_horse', function(){
var inputtextvalue = $.trim($("#search").val());
});