The class .notshow is hidden by default and i want the div with .notshow class to be visible after clicking the Show It text inside .shownow class.
I created a jquery code but its not working.
When i click .shownow div all hidden div with .notshow class go visible.
I only want a single div with .notshow class to be visible .
Example: I want to show single div with class .notshow to be visible and if i click another div the previous div should be hidden.
Its Similar to accordion.
*I searched alot on internet but can't find any solution similar to this.
Thanks for help
JsFiddle: https://jsfiddle.net/yoxo5kfh/3/
<div class="data">
<div class="main">
<div class="title">
<div class="shownow"><h4>Show It</h4></div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
<div class="main">
<div class="title">
<div class="shownow"><h4>Show It</h4></div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
<div class="main">
<div class="title">
<div class="shownow"><h4>Show It</h4></div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
</div>
For this, we have to target which one you want to show, we can target it by combining..
$(this) - the element you click.
.closest - parent of both the element.
if you want some animation to use .slideDown insted of .show() and .slideUp insted of .hide()
$('body').on('click', '.shownow', function() {
$('.notshow').removeClass('nohide');
$(this).closest('.main').find('.notshow').addClass('nohide').toggle();
$('.notshow').each(function() {
if(!$(this).hasClass('nohide')){
$(this).hide();
}
});
});
.notshow {
display: none;
}
.catlist {
list-style: none;
}
.show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="data">
<div class="main">
<div class="title">
<div class="shownow">
<h4>Show It</h4>
</div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
<div class="main">
<div class="title">
<div class="shownow">
<h4>Show It</h4>
</div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
<div class="main">
<div class="title">
<div class="shownow">
<h4>Show It</h4>
</div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
</div>
try the code below. It will remove the class from all notshow and show the closest notshow to the clicked element
Updated fiddle here.
$('.shownow').click(function() {
$(".notshow").removeClass("show")
$(this).parent().next(".notshow").addClass("show");
})
A simple show/hide using JQuery. Try the below code, when you click on 'Show It', it finds the '.notshow' in the current parent container and accordingly hides the other containers:
$('.shownow').click(function() {
$(this).parents(".main:first").find(".notshow").toggle();
});
.notshow {
display: none;
}
.catlist {
list-style: none;
}
.shownow h4 {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="data">
<div class="main">
<div class="title">
<div class="shownow">
<h4>Show It</h4>
</div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
<div class="main">
<div class="title">
<div class="shownow">
<h4>Show It</h4>
</div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
<div class="main">
<div class="title">
<div class="shownow">
<h4>Show It</h4>
</div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
</div>
At last got somethig will be able for you
<div class="data">
<div class="main">
<div class="title">
<div class="shownow"><h4>Show It</h4></div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
<div class="main">
<div class="title">
<p class="shownow"><h4>Show It</h4><p>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
<div class="main">
<div class="title">
<div class="shownow"><h4>Show It</h4></div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
</div>
<p>Hello</p>
<p class="selected">Hello Again</p>
<div><span>And Again</span></div>
<script>
var elms = $( "div.notshow" )
$(document).on("click", ".title", function(event){
event.preventDefault();
$('.notshow').removeClass('show');
$(this).closest('div').next('.notshow').addClass('show');
});
</script>
let x = document.querySelectorAll('.main');
let list = document.querySelectorAll('.notshow')
let length = x.length;
for (let i = 0; i < length; i++) {
x[i].onclick = () => {
if (list[i].classList.contains('show')) {
list[i].classList.toggle('show');
} else {
for (let x = 0; x < length; x++) {
list[x].classList.remove('show');
}
list[i].classList.toggle('show'); // toggle/add
}
}
}
//let x = document.querySelectorAll('.main');
//let list = document.querySelectorAll('.notshow')
//let length = x.length;
//for (let i = 0; i < length; i++) {
// x[i].onclick = () => {
// list[i].classList.toggle('show'); // toggle/add
// }
//}
.notshow{
display:none;
}
.catlist{
list-style:none;
}
.show{
display:block;
}
<div class="data">
<div class="main">
<div class="title">
<div class="shownow">
<h4>Show It</h4>
</div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
<div class="main">
<div class="title">
<div class="shownow">
<h4>Show It</h4>
</div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
<div class="main">
<div class="title">
<div class="shownow">
<h4>Show It</h4>
</div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
</div>
I have update my answer, This will help you, just add it to your code.
<style type="text/css">
.notshow{
display: none;
}
</style>
<script type="text/javascript">
$(document).on('click','.shownow', function(){
var this_display = $
(this).parent().next('.notshow').css('display');
$('.notshow').css('display','none');
if(this_display=="block"){
$(this).parent().next('.notshow').css('display','none');
}else{
$(this).parent().next('.notshow').css('display','block');
}
});
</script>
Related
I have a large number of DIVs on a page. Each being a container for an Unordered List. Above each DIV is a header text which consists of an element with an anchor.
e.g.
<h2><a id="header1" href="#" > Header 1 </a></h3>
<div id="container1">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<h2><a id="header2" href="#" > Header 2 </a></h3>
<div <div id="container2">>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
I need to have all these DIVs hidden until the header (anchor) is clicked. If the user clicks header it should toggle show/hide DIV
How can I accomplish this in JQUERY in a way that I can have one onClick function for all the DIVS, possibly using an id to differentiate between divs?
<h2> Header 1 </h3>
function toggleDiv(id) {
}
but in JQUERY ?
SOLVED!!!!
<script>
$(function(){
$('.toggle-link').on('click', function() {
var linkId = $(this).attr('data-div-id');
$('#' + linkId).toggle();
});
});
</script>
<h2> Header 1 </h2>
<div id="div1">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<h2> Header 2 </h2>
<div id="div2">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
You can use .toggle() in jQuery
toggle() method toggles between hide() and show() for the selected
elements.
function toggleDiv(id) {
$('#'+id).toggle();
}
where id is the parameter you pass
I have tried this CSS, but when you click on the fist link the other two will move at the bottom, same for the other links.
I have tried to change the initial code and put the links in one class, but I don't know that much JavaScript, so probably my modifications are very wrong.
How can I move the links on one line ? So that when you click on one link the toggled list appears without affecting the link position, so all the links will still be on one line.
HTML
<div id="dropdown-1" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
<div id="dropdown-2" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
<div id="dropdown-3" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
Javascript
$(document).ready(function(){
$("a.dropdown-link").click(function(e) {
e.preventDefault();
var $div = $(this).next('.dropdown-container');
$(".dropdown-container").not($div).hide();
if ($div.is(":visible")) {
$div.hide()
} else {
$div.show();
}
});
$(document).click(function(e){
var p = $(e.target).closest('.dropdown').length
if (!p) {
$(".dropdown-container").hide();
}
});
});
CSS
.dropdown{
display:inline-block;
}
Initial code
http://jsfiddle.net/6t6BP/4/
Modified by me code
https://jsfiddle.net/Lavi2/yyfhrss0/
One solution would be to make the dropdown-container to not push elements down. You can do that, in your case, with position:absolute and position it relative to the link that triggers it.
P.S. that is not just javascript, it's jQuery.
$(document).ready(function(){
$("a.dropdown-link").click(function(e) {
e.preventDefault();
var $div = $(this).next('.dropdown-container');
$(".dropdown-container").not($div).hide();
if ($div.is(":visible")) {
$div.hide()
} else {
$div.show();
}
});
$(document).click(function(e){
var p = $(e.target).closest('.dropdown').length
if (!p) {
$(".dropdown-container").hide();
}
});
});
.dropdown{
display:inline-block;
position:relative
}
.dropdown-container {
position:absolute;
left:0;
top:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dropdown-1" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
<div id="dropdown-2" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
<div id="dropdown-3" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
Full code example
$(document).ready(function(){
$("a.dropdown-link").click(function(e) {
e.preventDefault();
var $div = $(this).next('.dropdown-container');
$(".dropdown-container").not($div).hide();
if ($div.is(":visible")) {
$div.hide()
} else {
$div.show();
}
});
$(document).click(function(e){
var p = $(e.target).closest('.dropdown').length
if (!p) {
$(".dropdown-container").hide();
}
});
});
.dropdown{
display:inline-block;
vertical-align:top;
}
.dropdown-container ul{
list-style:none;
padding:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="dropdown-1" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
<div id="dropdown-2" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
<div id="dropdown-3" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
How to wrap all ul elements in div with JQuery automatically?
<div id="my_uls">
<ul>
<li>Item one</li>
<li>Item two
<ul>
<li>Item one of two</li>
</ul>
</li>
</ul>
</div>
But what I want:
<div id="my_uls">
<div>
<ul>
<li>Item one</li>
<li>Item two
<div>
<ul>
<li>Item one of two</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
You need to use .wrap():
$(function() {
$("ul").wrap("<div />");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="my_uls">
<ul>
<li>Item one</li>
<li>Item two
<ul>
<li>Item one of two</li>
</ul>
</li>
</ul>
</div>
Just use wrap function for this
<scrpt>
$(document).ready(function(){
var myuls = $("#my_uls").find("ul");
for(var i=0;i<myuls.length;i++){
$(myuls[i]).wrap("<div></div>");
}
});
</script>
$('#my_uls ul'), This will refer all your ul inside the div.
if you need the 1st ul only
$('#my_uls ul:not(#my_uls ul ul)').
I would like to make a function in Typescript to find the next div and add it a css class, here is my try:
<ul>
<li>Item 1</li>
<div class="content hide"></div>
<li>Item 2</li>
<div class="content hide"></div>
<li>Item 3</li>
<div class="content hide"></div>
<li>Item 4</li>
<div class="content hide"></div>
<li>Item 5</li>
<div class="content hide"></div>
</ul>
Now the function in Typescript
function toggle(){
this.parent().next('.content').class('hide');
}
Thanks guys
this is not what you are assuming! You are suppose to pass current element as this as argument.
Also note there is no .class method, you should be using .toggleClass method.
function toggle(elem) {
$(elem).parent().next('.content').toggleClass('hide');
}
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul>
<li>Item 1
</li>
<div class="content hide">Content Goes here!</div>
<li>Item 2
</li>
<div class="content hide">Content Goes here!</div>
<li>Item 3
</li>
<div class="content hide">Content Goes here!</div>
<li>Item 4
</li>
<div class="content hide">Content Goes here!</div>
<li>Item 5
</li>
<div class="content hide">Content Goes here!</div>
</ul>
But it is better to use jQuery-event-binding than Inline-event-binding
function toggle() {
$(this).parent().next('.content').toggleClass('hide'); //this will refer to current element!
}
$('li a').on('click', toggle);
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul>
<li>Item 1
</li>
<div class="content hide">Content Goes here!</div>
<li>Item 2
</li>
<div class="content hide">Content Goes here!</div>
<li>Item 3
</li>
<div class="content hide">Content Goes here!</div>
<li>Item 4
</li>
<div class="content hide">Content Goes here!</div>
<li>Item 5
</li>
<div class="content hide">Content Goes here!</div>
</ul>
HTML Code
<a (click)="showparent($event)" class="collapsible-header">show next element</a>
<div class="collapsible-body" style="display:none">
<ul>
<li>Node2</li>
<li>Node2</li>
<li>Node2</li>
</ul>
</div>
TypeScript Code
showparent(elem){
const target = elem
const display = target.toElement.nextSibling.style.display
if(display == 'block'){
target.toElement.nextSibling.style.display = 'none'
}else{
target.toElement.nextSibling.style.display = 'block'
}
}
I want to add a class to the preceding h3 element whenever any of the li under it being clicked, here is my html:
<div class="list">
<div class="marketing">
<h3> List I</h3>
<div>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>
</div>
<div class="operations">
<h3> List II</h3>
<div>
<ul>
<li>item a</li>
<li>item b</li>
<li>item c</li>
</ul>
</div>
</div>
</div>
I tried to use the following script but in vain.
$('.list li').click(function () {
$(this)parent().prev('h3').addClass('active');
);
or either
$('.list li').click(function () {
$(this).parent().parent().children('h3')addClass('active');
);
Any idea?
use:
$(this).closest('div').prev('h3').addClass('active');
or
$(this).closest('div').siblings('h3').addClass('active');
Use this
$('.list li').click(function () {
$(this).parent().parent().prev().addClass('active');
});
DEMO