jQuery toggle for multiple elements - javascript

Hello I am trying to make a toggle for multiple elements in jQuery but it not working the plus button when click does not slide toggle the element please help here is the link
HTML
<!-post begin-- post 4 >
<div class="col-xs-12 post-card">
<div class="col-xs-3">
</div>
<div class="col-xs-7 post-start" >
hello this is a test caption
</div>
<div class="col-xs-2">
<button class="fa fa-plus plus-icon post-btn11" type="button">+</button>
</div>
<div class="collapse col-xs-12" style="font-size: 16px; color:#646464;">
<i class="fa fa-comments comment2"></i> <span>10 comments</span><span class="margin-left-10"><i class="fa fa-heart"></i>
10 likes</span>
</div>
</div>
<!-post end for post 4-->
<!-post begin-- post 5 >
<div class="col-xs-12 post-card">
<div class="col-xs-3">
</div>
<div class="col-xs-7 post-start" >
This is a test comment
</div>
<div class="col-xs-2">
<button class="fa fa-plus plus-icon post-btn11" type="button" >+</button>
</div>
<div id="post-info" class="collapse col-xs-12" style="font-size: 16px; color:#646464;">
<i class="fa fa-comments comment2"></i> <span>11 comments</span><span class="margin-left-10"><i class="fa fa-heart"></i>
13 likes</span>
</div>
</div>
<!-post end for post 5-->
CSS
.post-card {
background-color: #f4f4f4;
padding: 10px;
border: 1px solid #eee;
margin-top: 10px;
}
.fa {
float: right;
}
.post.info {
display: none;
}
jQuery
$(document).ready(function(){
$(".post-btn11").click(function(){
$(this).siblings(".post-info").slideToggle();
});
});


Totally wrong selector post-info is an id not a class, then post-info not siblings of post-btn11 but it's parent siblings, so the selector should like this:
$(".post-btn11").click(function(){
$(this).parent().siblings('#post-info').slideToggle();
});
But better use class because it should repeat and not unique. Also add this class to first one too.
$(".post-btn11").click(function(){
$(this).parent().siblings('.post-info').slideToggle();
});
JSFiddle


Here is the correction to your code. I have also updated your fiddle so go check it out. You had a problem with giving your post-info element an ID. In corrected version I simply add post-info as a class name. And also the .sublings() function will not work, since you applied it to your button element and it will not find any nested elements in it. So I needed to find a button's parent element first to get on the "same level" with your next post-info element and then simply use .next() function
$(document).ready(function(){
$(".post-btn11").click(function(){
$(this).parent(".col-xs-2").next(".post-info").slideToggle();
});
});
.post-card {
background-color: #f4f4f4;
padding: 10px;
border: 1px solid #eee;
margin-top: 10px;
}
.fa {
float: right;
}
.post.info {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-post end for post 3-->
<!-post begin-- post 4 >
<div class="col-xs-12 post-card">
<div class="col-xs-3">
</div>
<div class="col-xs-7 post-start" >
hello this is a test caption
</div>
<div class="col-xs-2">
<button class="fa fa-plus plus-icon post-btn11" type="button">+</button>
</div>
<div class="collapse col-xs-12 post-info" style="font-size: 16px; color:#646464;">
<i class="fa fa-comments comment2"></i> <span>10 comments</span><span class="margin-left-10"><i class="fa fa-heart"></i>
10 likes</span>
</div>
</div>
<!-post end for post 4-->
<!-post begin-- post 5 >
<div class="col-xs-12 post-card">
<div class="col-xs-3">
</div>
<div class="col-xs-7 post-start" >
This is a test comment
</div>
<div class="col-xs-2">
<button class="fa fa-plus plus-icon post-btn11" type="button" >+</button>
</div>
<div class="collapse col-xs-12 post-info" style="font-size: 16px; color:#646464;">
<i class="fa fa-comments comment2"></i> <span>11 comments</span><span class="margin-left-10"><i class="fa fa-heart"></i>
13 likes</span>
</div>
</div>
<!-post end for post 5-->

Related

Switching expand/collapse arrows on clicking different item

I am working on simple FAQ section, and I need a little bit help.
The problem is that when I switch between questions, the expand/collapse arrow will stay UP. Do you have any suggestions?
$(document).ready(function(){
var nadpis = $('.nadpis');
nadpis.on('click', function () {
$(this).siblings().slideToggle()
$(this).children().toggleClass("off on")
nadpis.not(this).siblings().slideUp();
});
});
.textbox:first-child p {
display: none;
}
.nadpis {
display: flex;
flex-direction: row;
align-items: baseline;
justify-content: space-between;
gap: 5em;
border-bottom: 1px solid;
}
.off i:nth-child(2) {
display: none;
}
.off i:first-child {
display: block;
}
.on i:nth-child(2) {
display: block;
}
.on i:first-child {
display: none;
}
<link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght#400;700&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/7a8caae1e8.js" crossorigin="anonymous"></script>
<section class="faq-content">
<div class="faq-textside">
<div class="faq-text">
<div class="textbox">
<div class="nadpis">
<h2>How many team members can I invite?</h2>
<div class="off">
<i class="fas fa-chevron-down"></i>
<i class="fas fa-chevron-up"></i>
</div>
</div>
<p>You can invite up to 2 additional users on the Free plan. There is no limit on
team members for the Premium plan.</p>
</div>
<div class="textbox">
<div class="nadpis">
<h2>What is the maximum file upload size?</h2>
<div class="off">
<i class="fas fa-chevron-down"></i>
<i class="fas fa-chevron-up"></i>
</div>
</div>
<p> No more than 2GB. All files in your account must fit your allotted storage space.</p>
</div>
<div class="textbox">
<div class="nadpis">
<h2>How do I reset my password?</h2>
<div class="off">
<i class="fas fa-chevron-down"></i>
<i class="fas fa-chevron-up"></i>
</div>
</div>
<p>Click “Forgot password” from the login page or “Change password” from your profile page.
A reset link will be emailed to you.</p>
</div>
<div class="textbox">
<div class="nadpis">
<h2>Can I cancel my subscription?</h2>
<div class="off">
<i class="fas fa-chevron-down"></i>
<i class="fas fa-chevron-up"></i>
</div>
</div>
<p>Yes! Send us a message and we’ll process your request no questions asked.</p>
</div>
<div class="textbox">
<div class="nadpis">
<h2>Do you provide additional support?</h2>
<div class="off">
<i class="fas fa-chevron-down"></i>
<i class="fas fa-chevron-up"></i>
</div>
</div>
<p> Chat and email support is available 24/7. Phone lines are open during normal business hours.</p>
</div>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js"></script>
Here is full code pen

Your toggleClass call only affects the content of the clicked item. Extend the scope of this effect: first select the container element, and then find all relevant "on" elements, and the "off" elements below the clicked item, and toggle those:
$(this).closest(".faq-text").find(".on")
.add($(this).find(".off"))
.toggleClass("off on")
Snippet:
$(document).ready(function(){
var nadpis = $('.nadpis');
nadpis.on('click', function () {
$(this).siblings().slideToggle()
$(this).closest(".faq-text").find(".on")
.add($(this).find(".off"))
.toggleClass("off on")
nadpis.not(this).siblings().slideUp();
});
});
.textbox p {
display: none;
}
.nadpis {
display: flex;
flex-direction: row;
align-items: baseline;
justify-content: space-between;
gap: 5em;
border-bottom: 1px solid;
}
.off i:nth-child(2) {
display: none;
}
.off i:first-child {
display: block;
}
.on i:nth-child(2) {
display: block;
}
.on i:first-child {
display: none;
}
<link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght#400;700&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/7a8caae1e8.js" crossorigin="anonymous"></script>
<section class="faq-content">
<div class="faq-textside">
<div class="faq-text">
<div class="textbox">
<div class="nadpis">
<h2>How many team members can I invite?</h2>
<div class="off">
<i class="fas fa-chevron-down"></i>
<i class="fas fa-chevron-up"></i>
</div>
</div>
<p>You can invite up to 2 additional users on the Free plan. There is no limit on
team members for the Premium plan.</p>
</div>
<div class="textbox">
<div class="nadpis">
<h2>What is the maximum file upload size?</h2>
<div class="off">
<i class="fas fa-chevron-down"></i>
<i class="fas fa-chevron-up"></i>
</div>
</div>
<p> No more than 2GB. All files in your account must fit your allotted storage space.</p>
</div>
<div class="textbox">
<div class="nadpis">
<h2>How do I reset my password?</h2>
<div class="off">
<i class="fas fa-chevron-down"></i>
<i class="fas fa-chevron-up"></i>
</div>
</div>
<p>Click “Forgot password” from the login page or “Change password” from your profile page.
A reset link will be emailed to you.</p>
</div>
<div class="textbox">
<div class="nadpis">
<h2>Can I cancel my subscription?</h2>
<div class="off">
<i class="fas fa-chevron-down"></i>
<i class="fas fa-chevron-up"></i>
</div>
</div>
<p>Yes! Send us a message and we’ll process your request no questions asked.</p>
</div>
<div class="textbox">
<div class="nadpis">
<h2>Do you provide additional support?</h2>
<div class="off">
<i class="fas fa-chevron-down"></i>
<i class="fas fa-chevron-up"></i>
</div>
</div>
<p> Chat and email support is available 24/7. Phone lines are open during normal business hours.</p>
</div>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js"></script>
Unrelated remark
Make sure to hide all involved <p> elements when the pages loads. In the CSS replace this:
.textbox:first-child p {
display: none;
}
...with just this:
.textbox p {
display: none;
}

FadeOut one element and fadeIn another element on hover

I'm trying to achieve an effect where on the hover of an element A, an element B is fadeOut and an element C is fadeIn, both inside the element A.
That's what I tried:
$('.button').hover(function() {
info = $(this).find('.info');
download = $(this).find('.download');
info.stop().fadeOut(150, function() {
download.stop().fadeIn(150);
})
}, function() {
download.stop().fadeOut(150, function() {
info.stop().fadeIn(150);
})
})
.button {
background-color: orange;
padding: 10px;
width: 250px;
height: 40px;
line-height: 40px;
text-align: center;
margin-bottom: 10px;
}
.download {
display: none;
font-size: 17px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button">
<div class="info">
<i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
</div>
<div class="download">Download</div>
</div>
<div class="button">
<div class="info">
<i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
</div>
<div class="download">Download</div>
</div>
<div class="button">
<div class="info">
<i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
</div>
<div class="download">Download</div>
</div>
<div class="button">
<div class="info">
<i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
</div>
<div class="download">Download</div>
</div>
Hovering one element at a time seems working fine but when you try to hover more elements concurrently the animation it starts to break.
Any solution? Other approaches are accepted. Thanks.

The main problem is to stop the animation before assigning another. This way there are no glitches:
$('.button').each(function(i) {
var thisButton = $(this);
var thisInfo = thisButton.find('.info');
var thisDownload = thisButton.find('.download');
thisButton.on('mouseenter', function(e) {
thisDownload.stop();
thisInfo.stop().fadeOut(150, function() {
thisDownload.stop().fadeIn(150);
});
}).on('mouseleave', function(e) {
thisInfo.stop();
thisDownload.stop().fadeOut(150, function() {
thisInfo.stop().fadeIn(150);
});
});
});
.button {
background-color: orange;
padding: 10px;
width: 250px;
height: 40px;
line-height: 40px;
text-align: center;
margin-bottom: 10px;
}
.download {
display: none;
font-size: 17px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button">
<div class="button_inner">
<div class="info">
<i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
</div>
<div class="download">Download</div>
</div>
</div>
<div class="button">
<div class="button_inner">
<div class="info">
<i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
</div>
<div class="download">Download</div>
</div>
</div>
<div class="button">
<div class="button_inner">
<div class="info">
<i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
</div>
<div class="download">Download</div>
</div>
</div>
Also on JSFiddle
Posting this because this may happen to skyline's answer:

You are inadvertently creating global variables for info and download by omitting the var, let, or const keywords. That means every function call is using and overwriting those variables. You need to create local variables in each function.
$('.button').hover(function() {
var info = $(this).find('.info');
var download = $(this).find('.download');
download.stop();
info.stop().fadeOut(150, function() {
download.stop().fadeIn(150);
})
}, function() {
var info = $(this).find('.info');
var download = $(this).find('.download');
info.stop();
download.stop().fadeOut(150, function() {
info.stop().fadeIn(150);
})
})
.button {
background-color: orange;
padding: 10px;
width: 250px;
height: 40px;
line-height: 40px;
text-align: center;
margin-bottom: 10px;
}
.download {
display: none;
font-size: 17px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button">
<div class="info">
<i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
</div>
<div class="download">Download</div>
</div>
<div class="button">
<div class="info">
<i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
</div>
<div class="download">Download</div>
</div>
<div class="button">
<div class="info">
<i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
</div>
<div class="download">Download</div>
</div>
<div class="button">
<div class="info">
<i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
</div>
<div class="download">Download</div>
</div>

Footer div gets under another div

I have a div with some text and another one that I'm filling it with a list of photos and a footer div. The footer div should be below photos div but it gets under it. This is my code:
div.gallery {
margin: 5px;
border: 2px solid #ccc;
float: left;
width: 280px;
}
div.gallery:hover {
border: 2px solid #777;
}
div.gallery img {
width: 80%;
height: auto;
margin: auto;
}
div.desc {
padding: 15px;
text-align: left;
}
<div>
<p>Software Engineer
</div>
<div id="test">
<div id="comments">
<div class="gallery">
<img src="https://example.com">
<div class="desc">
<i class="fa fa-thumbs-o-up" style="color:red;"> 74</i>
<i class="fa fa-comment-o" style="color:#333;"> 0</i>
<button id="1547014733616513536_414010731">comment</button>
</div>
</div>
<div class="gallery">
<img src="https://example.com">
<div class="desc">
<i class="fa fa-thumbs-o-up" style="color:red;"> 65</i>
<i class="fa fa-comment-o" style="color:#333;"> 1</i>
<button id="1535724697949655394_414010731">comment</button>
</div>
</div>
<div class="gallery">
<img src="https://example.com">
<div class="desc">
<i class="fa fa-thumbs-o-up" style="color:red;"> 68</i>
<i class="fa fa-comment-o" style="color:#333;"> 1</i>
<button id="1501575131271622723_414010731">comment</button>
</div>
</div>
</div>
<div id="footer" style="background:blue;height:100px;width:100%">
<div style="background:blue;height:200px;width:100%"></div>
</div>
Ans here is a screenshot of it
How can i fix it?

Issue may be because of the floats. Try using Clearfix
Try adding this class to comments.
(Modified Some HTML)
Give this a try.
HTML
<div>
<p>Software Engineer
</div>
<div id="test">
<div id="comments" class="clearfix">
<div class="gallery">
<img src="https://example.com">
<div class="desc">
<i class="fa fa-thumbs-o-up" style="color:red;"> 74</i>
<i class="fa fa-comment-o" style="color:#333;"> 0</i>
<button id="1547014733616513536_414010731">comment</button>
</div>
</div>
<div class="gallery">
<img src="https://example.com">
<div class="desc">
<i class="fa fa-thumbs-o-up" style="color:red;"> 65</i>
<i class="fa fa-comment-o" style="color:#333;"> 1</i>
<button id="1535724697949655394_414010731">comment</button>
</div>
</div>
<div class="gallery">
<img src="https://example.com">
<div class="desc">
<i class="fa fa-thumbs-o-up" style="color:red;"> 68</i>
<i class="fa fa-comment-o" style="color:#333;"> 1</i>
<button id="1501575131271622723_414010731">comment</button>
</div>
</div>
</div>
</div>
<div id="footer" style="background:blue;width:100%">
<div style="background:blue;width:100%"> footer div here</div>
</div>
CSS
.clearfix::after {
content: "";
display: table;
width: 100%;
clear: both;
}
div.gallery {
margin: 5px;
border: 2px solid #ccc;
float: left;
width: 280px;
}
div.gallery:hover {
border: 2px solid #777;
}
div.gallery img {
width: 80%;
height: auto;
margin: auto;
}
div.desc {
padding: 15px;
text-align: left;
}
.clearfix::after {
content: "";
width: 100%;
display: table;
clear: both;
}
<div>
<p>Software Engineer
</div>
<div id="test">
<div id="comments" class="clearfix">
<div class="gallery">
<img src="https://example.com">
<div class="desc">
<i class="fa fa-thumbs-o-up" style="color:red;"> 74</i>
<i class="fa fa-comment-o" style="color:#333;"> 0</i>
<button id="1547014733616513536_414010731">comment</button>
</div>
</div>
<div class="gallery">
<img src="https://example.com">
<div class="desc">
<i class="fa fa-thumbs-o-up" style="color:red;"> 65</i>
<i class="fa fa-comment-o" style="color:#333;"> 1</i>
<button id="1535724697949655394_414010731">comment</button>
</div>
</div>
<div class="gallery">
<img src="https://example.com">
<div class="desc">
<i class="fa fa-thumbs-o-up" style="color:red;"> 68</i>
<i class="fa fa-comment-o" style="color:#333;"> 1</i>
<button id="1501575131271622723_414010731">comment</button>
</div>
</div>
</div>
</div>
<div id="footer" style="background:blue;width:100%">
<div style="background:blue;width:100%"> footer div here</div>
</div>
Link for reference
Hope this helps…

UPDATED Your floats are not cleared. Use #Chandras example or you can add a CSS ID #footer { clear:both; } and call on it in your footer div as you have in your example already. <div id=footer">.
Bonus, add your style="width:100%; height:200px; background:blue; color:#FFF;" line to your css file and remove the style attr from your div footer tag all together.
In your example snipit, I used a class with clear in your footers ID.
Check it:
div.gallery {
margin: 5px;
border: 2px solid #ccc;
float: left;
width: 280px;
}
div.gallery:hover {
border: 2px solid #777;
}
div.gallery img {
width: 80%;
height: auto;
margin: auto;
}
div.desc {
padding: 15px;
text-align: left;
}
#footer {
clear:both;
width:100%;
height:200px;
background:blue;
color:#FFF;
}
<div>
<p>Software Engineer
</div>
<div id="test">
<div id="comments">
<div class="gallery">
<img src="https://example.com">
<div class="desc">
<i class="fa fa-thumbs-o-up" style="color:red;"> 74</i>
<i class="fa fa-comment-o" style="color:#333;"> 0</i>
<button id="1547014733616513536_414010731">comment</button>
</div>
</div>
<div class="gallery">
<img src="https://example.com">
<div class="desc">
<i class="fa fa-thumbs-o-up" style="color:red;"> 65</i>
<i class="fa fa-comment-o" style="color:#333;"> 1</i>
<button id="1535724697949655394_414010731">comment</button>
</div>
</div>
<div class="gallery">
<img src="https://example.com">
<div class="desc">
<i class="fa fa-thumbs-o-up" style="color:red;"> 68</i>
<i class="fa fa-comment-o" style="color:#333;"> 1</i>
<button id="1501575131271622723_414010731">comment</button>
</div>
</div>
</div>
<div id="footer">Footer
</div>
FYI
Bootstrap V3 soon to release v4.
CDN: Bootstrap CDN link
BS V3 Grid System: specific grid layout system
Bootstrap is an open source plugin that uses a standardized set of css and js rules already coded for you.
Among the many other awesome css and js additions, float your html tags using a standardized set of classes known as cols. These are used with media short cuts: xs, sm, md, lg, then add a division of 12, so you get something like. <div class="gallery col-xs-12 col-sm-12 col-md-4 col-lg-4"> (col-md-4 means you are using up 4 of the 12 increments for a single div. You have 3 gallery divs, so 3 X 4 = 12 = col-md-4) These validate for different screen size media.
Here is the layout from bootstrap grid per media:
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
#media (min-width: #screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
#media (min-width: #screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: #screen-lg-min) { ... }
// Extra small devices Phones (<768px) = .col-xs
// Small devices Tablets (≥768px) = .col-sm
// Medium devices Desktops (≥992px) = .col-md
// Large devices Desktops (≥1200px) = .col-lg
So by looking at my example, class="col-xs-12" on phones we would get one div that would be width=100%;. Where as "col-md-4" on lap tops and desk tops with resolution of any media larger than 992px we would get the divs stacked side by side at width=33.33%;
Best to just read up on bootstrap as it is a bit to get into in one of these forums. It is actually very simple to add and use if you read up on it and how it works.
There is also Bootply -> Bootstrap online editor, there are some amazing tools there to help you get started using bootstrap!
Hope this helps...

Remember that float are removed from normal document flow. You should clear floats when using them.
But I suggest you to rewrite your float code using flexbox. In this case you can remove floats because they will be ignores. Demo:
#comments {
/* specify element as flex-container */
/* its children will be treated as flex items */
display: flex;
/* allow moving elements to next line */
flex-wrap: wrap;
}
div.gallery {
margin: 5px;
border: 2px solid #ccc;
width: 280px;
}
div.gallery:hover {
border: 2px solid #777;
}
div.gallery img {
width: 80%;
height: auto;
margin: auto;
}
div.desc {
padding: 15px;
text-align: left;
}
<div>
<p>Software Engineer
</div>
<div id="test">
<div id="comments">
<div class="gallery">
<img src="https://example.com">
<div class="desc">
<i class="fa fa-thumbs-o-up" style="color:red;"> 74</i>
<i class="fa fa-comment-o" style="color:#333;"> 0</i>
<button id="1547014733616513536_414010731">comment</button>
</div>
</div>
<div class="gallery">
<img src="https://example.com">
<div class="desc">
<i class="fa fa-thumbs-o-up" style="color:red;"> 65</i>
<i class="fa fa-comment-o" style="color:#333;"> 1</i>
<button id="1535724697949655394_414010731">comment</button>
</div>
</div>
<div class="gallery">
<img src="https://example.com">
<div class="desc">
<i class="fa fa-thumbs-o-up" style="color:red;"> 68</i>
<i class="fa fa-comment-o" style="color:#333;"> 1</i>
<button id="1501575131271622723_414010731">comment</button>
</div>
</div>
</div>
<div id="footer" style="background:blue;height:100px;width:100%">
<div style="background:blue;heoght:200px;width:100%"></div>
</div>
</div>

You can replace This Code.
<div style="background:blue;height:200px;width:100%"></div>

Your issue that your comments container height is not correct, it is is not considering the inner nodes size.
So give comments overflow:hidden; or a fixed height or minheight

#footer {
float:left;
width:100%;
}

How to Show the hidden Item in ng-repeat by external directive in AngularJS?

I am displaying a loop of items from a list in controller using ng-repeat directive. They are just the regular todo items with a minimize button. So, what I am doing to minimize the items is by setting up ng-hide to true on click of minimize button for those particular elements. Code is as below.
<div ng-repeat="note in notesList">
<div class="col-md-3 single-note" style="margin:5px" ng-hide="note.minimize">
<div class="note-title" style="margin-left: 30px">
<i class="fa fa-2x fa-paperclip" style="position:absolute; left:5px; top:5px"></i>
<b ng-bind="note.title"></b>
</div>
<div class="description" style="margin-left: 30px; text-align: justify" ng-bind="note.description"></div>
<div class="note-footer" style="margin-left: 30px; margin-bottom: 2px">
<span>
<img ng-src="{{ note.priority == 'imp' && 'img/imp.png' || ( note.priority == 'trivial' && 'img/trivial.png' || 'img/critical.png' )}}" /><!--<i class="fa fa-2x fa-dot-circle-o"></i>--></span>
<div class="pull-right">
<button class="btn btn-sm btn-default minimize" style="border-radius: 100%" ng-click="note.minimize=true"><i class="fa fa-minus"></i></button>
<button class="btn btn-sm btn-default" style="border-radius: 100%" data-toggle='modal' data-target='#editNoteModal' ng-click="editNote(note.id)"><i class="fa fa-pencil"></i></button>
<button class="btn btn-sm btn-default" style="border-radius: 100%" ng-click="removeNote(note.id)"><i class="fa fa-trash-o"></i></button>
</div>
</span>
</div>
</div>
</div>
Here is how it looks like
I have shown the list in right panel using another ng-repeat where I am just showing titles of notes and a button to maximize if they are hidden (constraint is I cannot have both left and right panels in single ng-repeat). Now the problem is whenever I click minimize button, that particular item hides, But I am now unable to display it again using maximize button in right panel.
I tried creating a function in controller for ng-click of minimize button which will return true if current state of item is 'not hidden' and I have passed a variable to the same function via ng-click of maximize button setting it up as false for ng-hide. But it's not working.
I am fed up now. If you guys got the purpose, please help me achieving the same. :(
Edit: Here is right panel code
<!--Right Panel (TAKEN FIRST AND PULLED TO RIGHT IN ORDER TO MAINTAIN UPPER POSITOIN IN MOBILE RESPONSIVENESS)-->
<div class="col-md-3 right-panel pull-right">
<div id="critical-notes-bunch">
<br/>
<div class="alert alert-danger"><i class="fa fa-dot-circle-o"></i> Critical Notes</div>
<ul style="margin-left: -35px; margin-top: -10px; margin-bottom: 20px;">
<li ng-repeat="miniNote in notesList">
<a ng-click="mininote.minimize=false" style="cursor: pointer"><i class="fa fa-folder-open-o"></i></a> <span ng-bind="miniNote.title"></span>×
</li>
<a style="color: gray"><i class="fa fa-2x fa-ellipsis-h"></i> <i class="fa fa-2x fa-ellipsis-h"></i></a>
</ul>
</div>
<div id="critical-notes-bunch">
<div class="alert alert-warning"><i class="fa fa-dot-circle-o"></i> Important Notes</div>
<ul style="margin-left: -35px; margin-top: -10px; margin-bottom: 20px;">
<li ng-repeat="miniNote in notesList">
<a ng-click="mininote.minimize=false" style="cursor: pointer"><i class="fa fa-folder-open-o"></i></a> <span ng-bind="miniNote.title"></span>×
</li>
<a style="color: gray"><i class="fa fa-2x fa-ellipsis-h"></i> <i class="fa fa-2x fa-ellipsis-h"></i></a>
</ul>
</div>
<div id="critical-notes-bunch">
<div class="alert alert-success"><i class="fa fa-dot-circle-o"></i> Trivial Notes</div>
<ul style="margin-left: -35px; margin-top: -10px; margin-bottom: 20px;">
<li ng-repeat="miniNote in notesList">
<a ng-click="mininote.minimize=false" style="cursor: pointer"><i class="fa fa-folder-open-o"></i></a> <span ng-bind="miniNote.title"></span>×
</li>
<a style="color: gray"><i class="fa fa-2x fa-ellipsis-h"></i> <i class="fa fa-2x fa-ellipsis-h"></i></a>
</ul>
</div>
</div>
<!--/Right Panel-->

In your right panel you interator is called miniNode, but in ng-click you reference mininode.minimize.
Changing either miniNode to mininode or vice versa should fix your problem.

In the ng-repeat that you use for rendering the right hand list; can you not simply do
<div ng-repeat="note in notesList">
<span ng-click="note.minimize = false">Maximize</span>
...
</div>

getElementById returning value only for first element [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 years ago.
Improve this question
I have a script which is called on request on some generated elements, and selects specified element by id. The bizarre issue I'm experiencing is that the select perfectly works for the first item on the page but returns null for every other item. What could be the cause of this?
Here's the relevant Javascript:
<script type="text/javascript">
function showFrame(content, id, vid, crating)
{
var container = document.getElementById(vid+'_container');
$('#'+vid+'_embed').html(content);
$('#'+vid+'_embed iframe').attr('SCROLLING', 'YES');
var linkform = document.getElementById(vid + '_linkform');
linkform.setAttribute('action', '{{ url('/links/reportLink/') }}' + '/' + id);
$(document).on('submit', '#' + vid+ '_linkform', function() {
$.ajax({
url : $(this).attr('action'),
type : $(this).attr('method'),
data : $(this).serialize(),
beforeSend: function()
{
$('#ajax-loading').show();
},
success : function( data ) {
if (data == '{{trans("main.embeds report success")}}')
{
$('#'+vid+'_report-responses').html('<div class="alert alert-success alert-dismissable">{{ trans("main.embeds report success") }}<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button></div>')
}
else
{
console.log(data);
$('#'+vid+'_report-responses').html('<div class="alert alert-danger alert-dismissable">' + 'An error occurred while trying to report this link..' + '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button></div>')
}
},
error : function( xhr, err ) {
alert(err);
}
});
return false;
});
$('#input-'+vid).rateit('value', crating);
$('#input-'+vid).bind('rated', function(e){
var ri = $(this);
var value = ri.rateit('value');
ri.rateit('readonly', true);
$.ajax({
url : '{{ url('/links/rateLink/') }}',
type : 'GET',
data : {id: id, value: value},
beforeSend: function()
{
$('#ajax-loading').show();
},
success : function( data ) {
console.log(data);
},
error : function( xhr, err ) {
alert(err);
ri.rateit('readonly', false);
}
});
});
container.style.display = 'block';
return false;
}
</script>
And here part of the html
<div id="93_container" style="display:none">
<div class="embed-container" id="93_embed">
</div>
<div class="rateit" style="margin: 12px 0px;" id="input-93" data-rateit-min="0" data-rateit-max="10" data-rateit-step="0.5" data-rateit-value="1">
Rate Link
</div>
<a style="float: right; color: white;" href="javascript:void(0);" onclick="toggleDiv('93');" title="Hide View" class="btn btn-default no-bord-left"><i class="fa fa-minus-square"></i> Hide View</a>
<form method="POST" action="http://varmium.com/links/reportLink/%7Bid%7D" accept-charset="UTF-8" id="93_linkform" style="color: white; margin: 2px; float: right">
<input name="_token" type="hidden" value="cQQjBjZpmhefNxqWgeL7z5w4L9IMAUExSIMxX99P">
<i class="fa fa-trash-o"></i> Bad Link
</div>
<div class="row responses" id="93_report-responses" style="clear: both;">
</div>
<p>
</p>
<span class="row grey-out">
Release Date: 2014-04-06
</span>
</div>
</div>
<hr>
<div class="media col-sm-12">
<div class="pull-left col-sm-3">
<img src="http://image.tmdb.org/t/p/w300/oGkDVdlPewF60qwKfWfyhWTXL5f.jpg" alt="Poster of The Lion and the Rose" class="media-object img-responsive thumb">
</div>
<div class="media-body col-sm-9">
<style>
.embed-container { position: relative; clear:both; padding-bottom: 56.25%; padding-top: 30px; height: 100%; overflow: hidden; max-width: 100%; height: auto; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<div class="links-section">
<h3>
View
</h3>
<dt style="float: left;">
Link:
</dt>
<dd style="color: black;">
http://vodlocker.com
<span class="quality">
<i class="fa fa-signal">
</i>
</span>
HD
<span class="language">
<i class="fa fa-flag">
</i>
</span>
<span class="rating">
<i class="fa fa-star">
</i>
</span>
10
</dd>
<dt style="float: left;">
Link:
</dt>
<dd style="color: black;">
http://played.to
<span class="quality">
<i class="fa fa-signal">
</i>
</span>
HD
<span class="language">
<i class="fa fa-flag">
</i>
</span>
<span class="rating">
<i class="fa fa-star">
</i>
</span>
10
</dd>
<dt style="float: left;">
Link:
</dt>
<dd style="color: black;">
http://thefile.me
<span class="quality">
<i class="fa fa-signal">
</i>
</span>
HD
<span class="language">
<i class="fa fa-flag">
</i>
</span>
<span class="rating">
<i class="fa fa-star">
</i>
</span>
10
</dd>
</div>
<div id="94_container" style="display:none">
<div class="embed-container" id="94_embed">
</div>
<div class="rateit" style="margin: 12px 0px;" id="input-94" data-rateit-min="0" data-rateit-max="10" data-rateit-step="0.5" data-rateit-value="1">
Rate Link
</div>
<a style="float: right; color: white;" href="javascript:void(0);" onclick="toggleDiv('94');" title="Hide View" class="btn btn-default no-bord-left"><i class="fa fa-minus-square"></i> Hide View</a>
<form method="POST" action="http://varmium.com/links/reportLink/%7Bid%7D" accept-charset="UTF-8" id="94_linkform" style="color: white; margin: 2px; float: right">
<input name="_token" type="hidden" value="cQQjBjZpmhefNxqWgeL7z5w4L9IMAUExSIMxX99P">
<i class="fa fa-trash-o"></i> Bad Link
</div>
<div class="row responses" id="94_report-responses" style="clear: both;">
</div>
<p>
</p>
<span class="row grey-out">
Release Date: 2014-04-13
</span>
</div>
</div>
<hr>
<div class="media col-sm-12">
<div class="pull-left col-sm-3">
<img src="http://image.tmdb.org/t/p/w300/2FHwJZA82xHGMZE15Uq7IvW9grJ.jpg" alt="Poster of Breaker of Chains" class="media-object img-responsive thumb">
</div>

Your HTML is invalid (no closing form tags). When is doubt paste your HTML into JSFiddle and look for any red-highlighted elements.
As the ID'ed elements are forms it is having problems with the page.
If you close the first form element the second one is found fine.

Categories