Toggle div with same ID through JS - javascript

Following is my code. My requirement is to hide all div by default through JS. And when click on the link, it should open relevant div with same id.
<ul class="links">
<li>Search</li>
<li>Share</li>
</ul>
<div id="search" class="search">
<input type="search" placeholder="Search" />
</div>
<div id="del" class="del">
Share me
</div>
$(document).ready(function() {
$("ul.links li a").on("click", function(e) {
e.PreventDefault;
var grabID = $(this).attr( "href" );
$('div' + grabID).toggleClass("hide");
$("div").not('div' + grabID).addClass("hide");
});
});


Don't really need javascript at all for that if you only want the latest link to be the one that is opened:
div { display: none; }
div:target {display:block}
<ul class="links">
<li>Search</li>
<li>Share</li>
</ul>
<div id="search" class="search">
<input type="search" placeholder="Search" />
</div>
<div id="del" class="del">
Share me
</div>
Here is a jquery solution:
$(document).on('click','.links a',function(e){
e.preventDefault();
var href = $(this).attr('href');
$('div').hide();
$(href).show();
});
div {display:none}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="links">
<li>Search</li>
<li>Share</li>
</ul>
<div id="search" class="search">
<input type="search" placeholder="Search" />
</div>
<div id="del" class="del">
Share me
</div>


Hide your all divs on load of your document. And just show the respective div on click of the link.
see the working fiddle-
$(document).ready(function() {
$("div").hide();
$("ul.links li a").on("click", function(e) {
e.PreventDefault;
var grabID = $(this).attr( "href" );
$('div').hide();
$('div' + grabID).show();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="links">
<li>Search</li>
<li>Share</li>
</ul>
<div id="search" class="search">
<input type="search" placeholder="Search" />
</div>
<div id="del" class="del">
Share me
</div>


You can fix this issue by simply adding the class hide to all targets initially like
$('.search, .del').addClass("hide");
$("ul.links li a").on("click", function(e) {
e.preventDefault();
var grabID = $(this).attr("href");
$('div' + grabID).toggleClass("hide");
$("div").not('div' + grabID).addClass("hide");
});
.hide{display:none}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="links">
<li>Search</li>
<li>Share</li>
</ul>
<div id="search" class="search">
<input type="search" placeholder="Search" />
</div>
<div id="del" class="del">
Share me
</div>


Here you go with a solution using pure JavaScript
document.getElementById("search").classList.add("hide");
document.getElementById("del").classList.add("hide");
function clickMethod(e) {
var id = e.getAttribute("href").replace("#", "");
document.getElementById(id).classList.toggle("hide");
}
.hide {
display: none;
}
<ul class="links">
<li>Search</li>
<li>Share</li>
</ul>
<div id="search" class="search">
<input type="search" placeholder="Search" />
</div>
<div id="del" class="del">
Share me
</div>
Define a class name hide which will help you to hide the element and then use the toggle method to toggle the class.
Hope this will help you

Related

how to add and remove attributes click event in jquery?

function myFunction(e) {
var currentTab = $(e).data("target");
$(currentTab).is(':visible') && $(currentTab).hide('slow') || $(currentTab).show('slow').siblings().hide('slow');
if ($(currentTab).is(":hidden")){
$(currentTab).children('input').attr("name", 'filterMode');
$(currentTab).children('input').attr('value', currentTab);
$(currentTab).children('div').children('input:first').attr("name", 'filterBegin');
$(currentTab).children('div').children('input:last').attr("name", 'filterEnd');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-primary searchPanel">
<ul class="nav nav-list panel-tabs filterButtons">
<li>
<button class="btn btn-arya btn-primary" type="button" data-target="#kararNo" data-toggle="tab"
onclick="myFunction(this)">Karar No İle
</button>
</li>
</ul>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane" id="kararNo">
<input type="hidden" class="form-control filterInputs" id="searchInput0" placeholder="Karar No">
<div class="input col-sm-5">
<input type="text" class="form-control filterInputs" id="searchInput1" placeholder="Karar No">
</div>
</div>
</div>
</div>
</div>
This inputs open in first click, second click closes.
I want to delete when I close the added attributes when I open. can you help me please ?

function myFunction(e) {
var currentTab = $(e).data("target");
var filters = ['filterMode', 'filterBegin','filterEnd'];
if($(currentTab).is(':visible')){
$(currentTab).children('input').removeAttr('value');
$(currentTab).find('input').map(function(index,input){
$(input).removeAttr("name");
});
$(currentTab).siblings().find('input').map(function(index,input){
$(input).removeAttr("name");
});
$(currentTab).hide('slow');
}else{
$(currentTab).children('input').attr('value', currentTab);
$(currentTab).find('input').map(function(index,input){
$(input).attr("name", filters[index]);
});
$(currentTab).siblings().find('input').map(function(index,input){
$(input).removeAttr("name");
});
$(currentTab).show('slow').siblings().hide('slow');
}
}
solution of my question, that's it. Thank's a lot

function myFunction(e) {
var currentTab = $(e).data("target");
// check element visible
if($('#kararNo:visible').length == 0){
console.log("visible");
}else{
console.log("hidden");
}
//end element visiblity check
$(currentTab).is(':visible') && $(currentTab).hide('slow') || $(currentTab).show('slow').siblings().hide('slow');
if ($(currentTab).is(":hidden")){
console.log("hidden");
$(currentTab).children('input').attr("name", 'filterMode');
$(currentTab).children('input').attr('value', currentTab);
$(currentTab).children('div').children('input:first').attr("name", 'filterBegin');
$(currentTab).children('div').children('input:last').attr("name", 'filterEnd');
}
}
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var target = $(e.target).attr("href") // activated tab
alert(target);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel panel-primary searchPanel">
<ul class="nav nav-list panel-tabs filterButtons">
<li>
<button class="btn btn-arya btn-primary" type="button" data-target="#kararNo" data-toggle="tab"
onclick="myFunction(this)">Karar No İle
</button>
</li>
</ul>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane" id="kararNo">
<input type="hidden" class="form-control filterInputs" id="searchInput0" placeholder="Karar No">
<div class="input col-sm-5">
<input type="text" class="form-control filterInputs" id="searchInput1" placeholder="Karar No">
</div>
</div>
</div>
</div>
</div>
Just use your known id to check the visibility as follows.
if($('#kararNo:visible').length == 0){
console.log("visible");
}else{
console.log("hidden");
}

JavaScript class extends with onclick function

I face a problem with ajax on onclick function.
In html
<div>
<input type="text" id="metro" placeholder="Area">
<div id="areastatus"></div>
</div>
<div class="boo">
<ul>
<li>KHULNA</li>
<li>KUSHTIA</li>
</ul>
</div>
<div>
<input type="text" id="keyword" placeholder="Area">
<div id="keystatus"></div>
</div>
<div class="foo">
<ul>
<li>one</li>
<li>two</li>
</ul>
</div>
In javascript
$(document).on('click', 'li', function() {
$('#metro').val($(this).text());
$('#areastatus').fadeOut();
});
$(document).on('click', 'li', function() {
$('#keyword').val($(this).text());
$('#keystatus').fadeOut();
});
Here when any li is clicked then those are fadeout and send same text value in text field. I need to identify whose li is clicked 'boo' or 'foo' and send the particular value in text field.
please help me out..

You can use .closest to find the colsest parent and then use .attr("class") to get the class name like
$("li").click(function(){
console.log($(this).closest("div").attr("class"))
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
<input type="text" id="metro" placeholder="Area">
<div id="areastatus"></div>
</div>
<div class="boo">
<ul>
<li>KHULNA</li>
<li>KUSHTIA</li>
</ul>
</div>
<div>
<input type="text" id="keyword" placeholder="Area">
<div id="keystatus"></div>
</div>
<div class="foo">
<ul>
<li>one</li>
<li>two</li>
</ul>
</div>

Below is the code example you can put to get the class name for list item which is clicked
$(document).on('click','li',function(){
alert($(this).parent().parent().prop('class'));
$('#metro').val($(this).text());
$('#areastatus').fadeOut();
});
$(document).on('click','li',function(){
alert($(this).parent().parent().prop('class'));
$('#keyword').val($(this).text());
$('#keystatus').fadeOut();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="text" id="metro" placeholder="Area">
<div id="areastatus"></div>
</div>
<div class="boo">
<ul>
<li>KHULNA</li>
<li>KUSHTIA</li>
</ul>
</div>
<div>
<input type="text" id="keyword" placeholder="Area">
<div id="keystatus"></div>
</div>
<div class="foo">
<ul>
<li>one</li>
<li>two</li>
</ul>
</div>
Try this in both the functions:
$(document).on('click','li',function(){
$(this).parent().parent().prop('class');
$('#metro').val($(this).text());
$('#areastatus').fadeOut();
});

Find and focus first element with jquery

This is my bootstrap tab and I have two different elements are:
.nav-tabs and .tab-content and I want to focus first element if my ul li aria-controls attribute and my tab-content id is match/same
$(function() {
var tabMenuLink = $(".nav-tabs li a");
tabMenuLink.on("click", function() {
tabId = $(this).attr("aria-controls");
alert(tabId);
});
});
.box {
width: 700px;
margin: 100px auto;
}
ul li {
padding: 10px;
}
.tab-content {
padding: 10px;
}
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
<div class="box">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">OTEL</li>
<li role="presentation">TUR</li>
<li role="presentation">UÇAK</li>
<li role="presentation">GEMİ</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="otel-ara">
<input type="text" placeholder="otel first input">
<input type="text" placeholder="otel second input">
</div>
<div role="tabpanel" class="tab-pane" id="tur-ara">
<input type="text" placeholder="tur first input">
<input type="text" placeholder="tur second input">
</div>
<div role="tabpanel" class="tab-pane" id="gemi-ara">
<input type="text" placeholder="gemi first input">
<input type="text" placeholder="gemi second input">
</div>
<div role="tabpanel" class="tab-pane" id="ucak-ara">
<input type="text" placeholder="uçak first input">
<input type="text" placeholder="uçak second input">
</div>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script>

You can use
$('.tab-pane').hide(0);
$('#'+tabId).show(0);
$('#'+tabId).find('input:first').focus();
Working Demo
$(function() {
var tabMenuLink = $(".nav-tabs li a");
tabMenuLink.on("click", function() {
tabId = $(this).attr("aria-controls");
$('.tab-pane').hide(0);
$('#'+tabId).show(0);
$('#'+tabId).find('input:first').focus();
});
});
.box {
width: 700px;
margin: 100px auto;
}
ul li {
padding: 10px;
}
.tab-content {
padding: 10px;
}
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css' >
<div class="box">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">OTEL</li>
<li role="presentation">TUR</li>
<li role="presentation">UÇAK</li>
<li role="presentation">GEMİ</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="otel-ara">
<input type="text" placeholder="otel first input">
<input type="text" placeholder="otel second input">
</div>
<div role="tabpanel" class="tab-pane" id="tur-ara">
<input type="text" placeholder="tur first input">
<input type="text" placeholder="tur second input">
</div>
<div role="tabpanel" class="tab-pane" id="gemi-ara">
<input type="text" placeholder="gemi first input">
<input type="text" placeholder="gemi second input">
</div>
<div role="tabpanel" class="tab-pane" id="ucak-ara">
<input type="text" placeholder="uçak first input">
<input type="text" placeholder="uçak second input">
</div>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script>

You can use :data selector and first() method
jQuery("ul li:data(aria-controls)").first().val()
For :data selector you need use JqueryUi selector
Without JqueryUI
jQuery("ul li").find('[aria-controls]').first().val()

Try this:
$(function() {
var tabMenuLink = $(".nav-tabs li a");
tabMenuLink.on("click", function() {
var tabId = $(this).attr("aria-controls");
$(".tab-pane").removeClass("active");
$("#"+tabID).addClass("active");
$("#"+tabID).find("input").filter(':visible:first').focus();
});
});

You can use .focus() jQuery method to focus first input inside selected .tab-content
$(function() {
var tabMenuLink = $(".nav-tabs li a");
tabMenuLink.on("click", function() {
tabId = $(this).prop("aria-controls");
var selectedTab = $("#"+tabId);
selectedTab.find('input').first().focus();
});
});

Opening custom jquery tab with anchor link

I really need some help for jquery tabs. I would like to get to a specific tab via external anchor link (http://www.url.com#content2), the navigation link becomes activated and the correct tab is shown.
Other HTML Page
B Title | B Title
HTML
<div class="tabs-container">
<ul class="tabs">
<li class="current"><h4>Title 1</h4></li>
<li><h4>Title 2</h4></li>
</ul>
<div class="border-box group">
<div id="tab1" class="panel group showing" style="display: block;">
a
</div>
<div id="tab2" class="panel group" style="display: none;">
<a id="b">B title A<a><br>
information...... <br><br/>
<a id="bb">B title B<a><br>
information...... <br><br/>
</div>
</div>
</div>
Javascript
<script>
(function(a){a.fn.yiw_tabs=function(b){var c={tabNav:"ul.tabs",tabDivs:".containers",currentClass:"current"};b&&a.extend(c,b);this.each(function(){var b=a(c.tabNav,this),f=a(c.tabDivs,this),e;f.children("div").hide();e=0<a("li."+c.currentClass+" a",b).length?"#"+a("li."+c.currentClass+" a",b).data("tab"):"#"+a("li:first-child a",b).data("tab");a(e).show().addClass("showing").trigger("yit_tabopened");a("li:first-child a",b).parents("li").addClass(c.currentClass);a("a",b).click(function(){if(!a(this).parents("li").hasClass("current")){var e=
"#"+a(this).data("tab");a(this);a("li."+c.currentClass,b).removeClass(c.currentClass);a(this).parents("li").addClass(c.currentClass);a(".showing",f).fadeOut(200,function(){a(this).removeClass("showing").trigger("yit_tabclosed");a(e).fadeIn(200).addClass("showing").trigger("yit_tabopened")})}return!1})})}})(jQuery);
</script>
How can i edit? Thank you for your help.

use jQuery this.hash;
$(document).ready(function(){
$('#tab1').show();
$('.tabs li a.current').addClass('current');
$('.tabs li a').click(function() {
var tabDivId = this.hash;
$('.tabs li a').removeClass('current');
$(this).addClass('current');
$('.panel').hide();
$(tabDivId).fadeIn();
return false;
});
});
.panel{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul class="tabs">
<li><h4>Title 1</h4></li>
<li><h4>Title 2</h4></li>
</ul>
<div class="border-box group">
<div id="tab1" class="panel group showing">
a
</div>
<div id="tab2" class="panel group">
b
</div>
</div>

Replace the href attribute value to the id of the corresponding Tab and use below code...
HTML
<ul class="tabs">
<li class="current">
<h4><a data-tab="tab1" title="Title 1" href="#tab1">Title 1</a></h4>
</li>
<li>
<h4><a data-tab="tab2" title="Title 2" href="#tab2">Title 2</a></h4>
</li>
</ul>
<div class="border-box group">
<div id="tab1" class="panel group showing" style="display: block;"> a </div>
<div id="tab2" class="panel group" style="display: none;"> b </div>
</div>
Jquery
$('.tabs a').click(function(){
var attr = $(this).attr('href')
$('.tabs li').removeClass('current');
$(this).closest('li').addClass('current');
$('.border-box div').hide();
$(attr).show();
})
css
.border-box div { display:none;}
.showing { display:block;}
You can ask if any assistance required..

jquery moving up/down in loop

I am trying to move the elements in the div up/down. Once its moved the item.position has to be swapped with the previous one. Below is the code. Can someone please suggest how to pass the newly assigned position and associated data seq into an array so they can passed to controller and inserted to database
<c:forEach var="item" items="${entry.value }" >
<ul>
<li> <div class="rows">
<a id='${item.position}' data-seq='${attr.id}' class="noDownloadFormat" href="/files/${item.value}" target="_blank"><c:out value="${item.title}" /></a>
<div style="float:right;margin-top:-15px;">
<input type="button" class="btn" value="UP" />
</div>
</div>
</li>
<ul>
</c:forEach>
Jquery:
$(document).ready(function () {
$(".btn1").click(function(){
var $current = $(this).closest('li')
var currentval =$(this).closest('li').children().find("a").prop("id");
var prevVal=$current.prev('li').children().find("a").prop("id");
var $previous = $current.prev('li');
if($previous.length !== 0){
$current.insertBefore($previous);
$(this).closest('li').children().find("a").prop("id",prevVal);
$current.prev('li').children().find("a").prop("id")==currentval ;
}
return false;
});
});
thanks
I modified the jquery and now I am able move up and down but not able to swap the position

I done just up button...
Tweak it online.
<html>
<body>
<ul>
<li>
<div class="rows">
<a id='position1' data-seq='id1' class="noDownloadFormat" href="#" target="_blank">title1</a>
<div style="float:right;margin-top:-15px;">
<input type="button" class="btn" value="UP 1">
</div>
</div>
</li>
<li>
<div class="rows">
<a id='position2' data-seq='id2' class="noDownloadFormat" href="#" target="_blank">title2</a>
<div style="float:right;margin-top:-15px;">
<input type="button" class="btn" value="UP 2">
</div>
</div>
</li>
<li>
<div class="rows">
<a id='position3' data-seq='id3' class="noDownloadFormat" href="#" target="_blank">title3</a>
<div style="float:right;margin-top:-15px;">
<input type="button" class="btn" value="UP 3">
</div>
</div>
</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
var handler = function (e) {
$li = $(e.target).parent().parent().parent();
// Avoid delete element if it's at top of list.
if ($li.prev().size() !== 0) {
// Move element.
$li.prev().before($li.remove());
// Bind click handler to new button.
$('.btn', $($li)).click(handler);
}
};
$('.btn').on('click', handler);
</script>
</body>
</html>

Categories

Resources