For some reason my jQuery function is not working on a dynamic value.
I'm trying to show/hide content ("item-content") when the user clicks on the span "Click here".
If I use not nested HTML, everything works fine, but for some reason, my function breaks when I use nested HTML.
$('.item-content').hide();
$(document).on('click','.main .child span.item-title', function(e){
e.preventDefault();
$(this).next('.main .child span.item-content').toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="main">
<div class="child">
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
1
</div>
</div>
</div>
<div class="child">>
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
2
</div>
</div>
</div>
<div class="child">>
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
3
</div>
</div>
</div>
</div>
.next looks for the next sibling, so in your code you don't need to specify the class of what you're looking for as you're just getting the span sibling, which is .item-content.
Working example:
$('.item-content').hide();
$(document).on('click','.main .child span.item-title', function(e){
e.preventDefault();
$(this).next().toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="main">
<div class="child">
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
1
</div>
</div>
</div>
<div class="child">>
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
2
</div>
</div>
</div>
<div class="child">>
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
3
</div>
</div>
</div>
</div>
The selector you are toggling is incorrect, as it is looking for a span called 'item-content'. It should be:
$(this).next('.main .child div.item-content').toggle();
First of all make sure that the jQuery cdn library is initiated before the custom script on your page.
There are two ways to hide components by css and jquery both. I'm posting the css script too and it's better to hide using css.
Also there is no need for specifying the classes from top inside the click event for toggle, the next() function basically lookup for the next html component.
$('.item-content').hide(); // if using css to hide than this line is not required
$(document).on('click', '.item-title', function(){
$(this).next().toggle();
});
.item-content {
display: none;
}
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<div class="main">
<div class="child">
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
1
</div>
</div>
</div>
<div class="child">>
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
2
</div>
</div>
</div>
<div class="child">>
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
3
</div>
</div>
</div>
</div>
Related
Is there any option/s needed so the icons inside nested grid will be clickable?
I have an icon on the parent grid and it's working fine, but when it comes to the icons inside nested grid, nothing happens.
<div class="grid-stack parent-grid">
<div class="grid-stack-item wid-item" data-gs-x="0" data-gs-y="0" data-gs-no-move="true">
<div class="grid-stack-item-content wid-item-content">
<div class="widget-container">
<div class="widget-title">
<span id="wid-title">WIDGET TITLE</span>
<span class="widget-icon icon-enlarge"></span>
<span class="widget-icon icon-bin"></span>
</div>
<div class="widget-body">
<div class="grid-stack widget-component">
<div class='grid-stack-item wid-component-item'>
<div class='grid-stack-item-content'>
<div class='widget-title'>
<span class='widget-icon icon-bin'></span>
</div>
<div class='widget-body'>
<label>Widget 1</label> <br />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(".icon-bin").click(function (e) {
alert("ASD");
});
</script>
I'm looking to get my highlighter (blue bar) to stay on the element that is clicked on. I want to keep the hover animation but also include the option to have it stay on the <div> the user clicks. Any insight is greatly appreciated.
Pen: https://codepen.io/chriskaram/pen/eGXrOp
<div class="demo">
<div class="demo__content">
<h2 class="demo__heading">Assessment</h2>
<div class="demo__elems">
<div class="demo__elem demo__elem-1">Novice Assessment</div>
<div class="demo__elem demo__elem-2">Apprentice Assessment</div>
<div class="demo__elem demo__elem-3">Advanced Assessment</div>
<span class="demo__hover demo__hover-1"></span>
<span class="demo__hover demo__hover-2"></span>
<span class="demo__hover demo__hover-3"></span>
<div class="demo__highlighter">
<div class="demo__elems">
<div class="demo__elem">Novice Assessment</div>
<div class="demo__elem">Apprentice Assessment</div>
<div class="demo__elem">Advanced Assessment</div>
</div>
</div>
<div class="demo__examples">
<div class="demo__examples-nb">
<div class="nb-inner">
<div class="example example-adv">
<div class="example-adv">
<div class="example-adv__top">
<div class="example-adv__top-search"></div>
</div>
<div class="example-adv__mid"></div>
<div class="example-adv__line"></div>
<div class="example-adv__line long"></div>
</div>
</div>
<div class="example example-web">
<div class="example-web__top"></div>
<div class="example-web__left"></div>
<div class="example-web__right">
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
</div>
</div>
<div class="example example-both">
<div class="example-both__half example-both__left">
<div class="example-both__left-top"></div>
<div class="example-both__left-mid"></div>
</div>
<div class="example-both__half example-both__right">
<div class="example-both__right-top"></div>
<div class="example-both__right-mid"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
In this example, I just focused on demo__element-3.
Check this link: https://codepen.io/anon/pen/GMbYdz
These are the modifications to be made:
CSS:
Add .active to all demo__hover-3:hover styles(in css).
(ie, add .demo__hover-3.active to .demo__hover-3:hover)
Element:
Add class
active to demo__hover elements.
(in this case, it become
<span class="demo__hover demo__hover-3 active"></span>)
Jquery:
Add jquery to add active to element if user clicks it.
Just like the bootstrap manu when you click one option it will add a class 'active' to element <li>
My page is basically split in two parts:
<div *ngIf="initState">
<div class="ui accordion">
<div class="title">
<i class="dropdown icon"></i>
Title
</div>
<div class="content">
{{ someText }}
</div>
</div>
<button class="ui button" (click)="notInitialAnymore();">Click</button>
</div>
<div *ngIf="!initState">
<div class="ui accordion">
<div class="title">
<i class="dropdown icon"></i>
Another title
</div>
<div class="content">
{{ someOtherText }}
</div>
</div>
</div>
The point is that the accordion in initalState works fine, but the one in not initial state not - no reaction on a click on that element. In my case it is easy to make a work-around, but how should I do it without a work-around? How can I make the second accordion call:
<script language='javascript'>
$(document).ready(function(){
$('.ui.accordion').accordion();
});
</script>
Use [hidden] attribute, when you use *ngIf the element is not created in the dom so jQuery can not init the accordion on it.
<div [hidden]="!initState">
<div class="ui accordion">
<div class="title">
<i class="dropdown icon"></i>
Title
</div>
<div class="content">
{{ someText }}
</div>
</div>
<button class="ui button" (click)="notInitialAnymore();">Click</button>
</div>
<div [hidden]="initState">
<div class="ui accordion">
<div class="title">
<i class="dropdown icon"></i>
Another title
</div>
<div class="content">
{{ someOtherText }}
</div>
</div>
</div>
I try to make draggable &sortable content with jQuery UI when i use:
helper:clone property
it's work perfectly, but i don't want to clone elements.
I want move them and when i use default helper then elements are not sortable.
Elements are on the stack in one place, instead of move other elements to make empty place form dragged element
See those Html and script below
This works for 2 categories
<div class="content">
<div class="category" data-category="1">
<div class="noteCategory">
<h3>Cat 1</h3>
</div>
<div id="categorycontent1" class="categoryContent">
<div class="note cnote" data-id="2" data-category="1">
<span class="noteDate">
<span class="date">
2015-01-01
</span>
<span class="hour">
12:12
</span>
</span>
<div class="noteText">
note Text
</div>
</div>
<div class="note cnote" data-id="2" data-category="1">
<span class="noteDate">
<span class="date">
2015-01-02
</span>
<span class="hour">
12:12
</span>
</span>
<div class="noteText">
note Text 2
</div>
</div>
</div>
</div>
<div class="category" data-category="2">
<div class="noteCategory">
<h3>Cat 2</h3>
</div>
<div id="categorycontent2" class="categoryContent">
<div class="note cnote" data-id="5" data-category="2">
<span class="noteDate">
<span class="date">
2015-01-04
</span>
<span class="hour">
12:12
</span>
</span>
<div class="noteText">
note Text 22
</div>
</div>
<div class="note cnote" data-id="8" data-category="2">
<span class="noteDate">
<span class="date">
2015-01-06
</span>
<span class="hour">
12:12
</span>
</span>
<div class="noteText">
note Text 23
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="~/Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="~/Scripts/jquery-ui-1.11.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#categorycontent1, #categorycontent2").sortable({
connectWith: ".categoryContent"
}).disableSelection();
});
</script>
Hope this helps
By default, I have several DIVs hidden and then I fade them in when the user clicks on a certain button. That works fine but when I try to close a .holder DIV using a span within said .holder DIV, only the first one works. When I click the others, nothing happens. I get no error or any sort of visual feedback whatsoever.
The markup:
<div class="holder" id="window_one">
<div class="title_bar">
<p>Window 1</p>
<div class="control_holder">
<span class="controls" id="close">X</span>
<span class="controls" id="minimize">_</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
<div class="calculator" id="window_two">
<div class="title_bar">
<p>Window 2</p>
<div class="control_holder">
<span class="controls" id="close">X</span>
<span class="controls" id="minimize">_</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
The jQuery:
$(document).ready(function() {
$('#close').click(function() {
$(this).parents('.holder').fadeOut(250);
});
});
What exactly am I doing wrong here? I'm using jQuery 1.10.2 if that makes any difference.
I'd demo the code on jsFiddle but is seems to be down atm.
You can not have the same id of two element on the page. If you want to do that give it as a class name like -
<div class="holder" id="window_one">
<div class="title_bar">
<p>Window 1</p>
<div class="control_holder">
<span class="controls close">X</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
<div class="calculator" id="window_two">
<div class="title_bar">
<p>Window 2</p>
<div class="control_holder">
<span class="controls close">X</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
and the Jquery like -
$(document).ready(function() {
$('.close').click(function() {
$(this).parents('.holder').fadeOut(250);
});
});
Hope this will help.
Here is how it should be:
<div class="holder" id="window_one">
<div class="title_bar">
<p>Window 1</p>
<div class="control_holder">
<span class="controls close">X</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
<div class="calculator" id="window_two">
<div class="title_bar">
<p>Window 2</p>
<div class="control_holder">
<span class="controls close">X</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
and the JavaScript:
$(document).ready(function() {
$('.close').click(function(e) {
$(this).parents('.holder').forEach(function(){
$(this).fadeOut(250);
});
e.preventDefault();
});
});