Javascript onclick show/hide for multiple rows (Dynamic content) - javascript

I'm having a list of users where the admin can approve/decline.For these two action i'm using show/hide oncllick the code works.But in multiple rows for any action button onclick it shows/hide the content.I want paticular row's action button 'ld show/hide the content,on click of that button.How can I solve this?
Here is My view code laravel blade,
<script>
function showhide() {
var div = document.getElementById("collapse1");
if (div.style.display !== "none")
div.style.display = "none";
else
div.style.display = "block";
}
</script>
Content:
<div>
<button href="#collapse1" class="btn btn-success nav-toggle" onclick="showhide()">Action</button>
</div>
#if($user->approved == 0)
<div id="collapse1" style="display:none">
<span>
<a href="{!! route('approve', ['id' => $user->id]) !!}"><img alt="" src="http://www.clker.com/cliparts/l/n/a/E/b/t/check-mark-button-hi.png"
style="height: 48px; width: 48px" /></a>
</span><br/>
#else
<span>
<a href="{!! route('decline', ['id' => $user->id]) !!}">
<img alt="" src="https://images.onlinelabels.com/images/clip-art/TzeenieWheenie/TzeenieWheenie_red_green_OK_not_OK_Icons_1.png"
style="height: 48px; width: 48px"/>
</a>
</span>
</div>
#endif
Script
#pushonce('custom-scripts')
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
#endpushonce

It conflict id
You need change id:
id="collapse1" => id="collapse{$user->id}"
js and html function like https://jsfiddle.net/ft9xprnb/3/ .You can see result by click link and content function edited: elem.getAttribute("href")
function showhide(elem)
{
console.log(elem.getAttribute("href"));
var div = document.getElementById(elem.getAttribute("href").replace("#", ""));
if (div.style.display !== "none") {
div.style.display = "none";
}
else {
div.style.display = "block";
}
}

You can pass this in html
<button href="#collapse1" class="btn btn-success nav-toggle" onclick="showhide(this)">Action</button>
And then in JS
function showhide(elem)
{
var div = document.getElementById(elem.href.replace("#", ""));
if (div.style.display !== "none") {
div.style.display = "none";
}
else {
div.style.display = "block";
}
}
This way the elem you will be passing to click will be the clicked element.

Try changing content to this
<div>
<button href="#collapse1" class="btn btn-success nav-toggle" onclick="showhide()">Action</button>
</div>
<div id="collapse1" style="display:none">
#if($user->approved == 0)
<span>
<a href="{!! route('approve', ['id' => $user->id]) !!}">
<img alt="" src="http://www.clker.com/cliparts/l/n/a/E/b/t/check-mark-button-hi.png" style="height: 48px; width: 48px"/>
</a>
</span>
<br/>
#else
<span>
<a href="{!! route('decline', ['id' => $user->id]) !!}">
<img alt="" src="https://images.onlinelabels.com/images/clip-art/TzeenieWheenie/TzeenieWheenie_red_green_OK_not_OK_Icons_1.png" style="height: 48px; width: 48px"/>
</a>
</span>
#endif
</div>

Related

Reveal div by clicking button using JS

I'm trying to create a function that reveals additional content by clicking a button.
I've got a script that displays the content by default - How do I switch it so the content is hidden by default and only displays when the button is clicked?
function revealContent() {
var x = document.getElementById("additionalContent");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<div class="col-10 text-center">
<button class="btn btn-sm btn-primary" onclick="revealContent()">Show More Options...</button>
</div>
<div class="col-10" id="additionalContent">
<p>Content!</p>
</div>
You just have to have the style display: none applied by default and then toggle it. classList.toggle is a good use for this. You can do something like:
.hidden {
display: none;
}
<div class="col-10 text-center">
<button class="btn btn-sm btn-primary" onclick="revealContent()">Show More Options...</button>
</div>
<div class="col-10 hidden" id="additionalContent">
<p>Content!</p>
</div>
<script>
function revealContent() {
var x = document.getElementById("additionalContent");
x.classList.toggle('hidden');
}
</script>
<div class="col-10" id="additionalContent" style="display:none">
<p>Content!</p>
</div>
EDIT: You've to add the style="display:none" to make this as default when the page is loaded.

Show/hide div with javascript

I have a menu which should show the sub-elements organised in a div when clicked.
I provide below the structure of the html
function showOrHide() {
if (window.innerWidth < 800) {
var div = document.getElementById("links");
if (div.style.display == "block") {
div.style.display = "none";
} else {
div.style.display = "block";
}
}
}
<li>
<div id="image" onclick="showOrHide()">
<span>Test1</span>
</div>
<div id="links">
<span>Test2</span>
</div>
</li>
<li>
<div id="image" onclick=" showOrHide()">
<span>Test3</span>
</div>
<div id="links">
<span>Test4</span>
</div>
</li>
I would like the div id="links" to be shown or hidden when I click on div id="image". I have the following javascript.
The problem that I face is that onclick javascript is showing all the divs id=links in the menu and I would like only the div links next to the div image to be shown. Example when I click on Test1 only Test2 should be shown.
Element IDs should be unique within the entire document.
You must try creating unique id per div.
function showOrHide(rowNum)
{ if (window.innerWidth < 800) {
var div = document.getElementById("links_"+ rowNum);
if (div.style.display == "block")
{
div.style.display = "none";
}
else
{
div.style.display = "block";
}
}
}
<li>
<div id="image_1" onclick="showOrHide(1)">
<span>Test1
</span></div>
<div id="links_1">
<span >Test2</span>
</div></li>
<li>
<div id="image_2" onclick=" showOrHide(2)">
<span>Test3
</span></div>
<div id="links_2">
<span >Test4</span>
</div></li>
Change id and structure accordingly.
<li>
<div id="image_1" onclick="showOrHide(1)">
<span>Test1
</span>
</div>
<div id="links_1">
<span >Test2</span>
</div>
</li>
<li>
<div id="image_2" onclick=" showOrHide(2)">
<span>Test3
</span>
</div>
<div id="links_2">
<span >Test4</span>
</div>
</li>
JavaScript:
function showOrHide(rowNumber)
{ if (window.innerWidth < 800) {
var div = document.getElementById("links_"+ rowNumber);
if (div.style.display == "block")
{
div.style.display = "none";
}
else
{
div.style.display = "block";
}
}
}
Just provide a parameter to your showOrHide function which will be the selector for your div and do the toggling to that selector. See the implementation below
<li>
<div id="image" onclick="showOrHide('#links_1')">
<span>Test1</span>
</div>
<div id="links_1">
<span >Test2</span>
</div>
</li>
<li>
<div id="image" onclick=" showOrHide('#links_2')">
<span>Test3</span>
</div>
<div id="links_2">
<span >Test4</span>
</div>
</li>
And the JS:
function showOrHide(divSelector)
{
var div = document.querySelector(divSelector);
if (div.style.display == "none")
{
div.style.display = "block";
}
else
{
div.style.display = "none";
}
}
var elems = document.getElementsByClassName("links");
Array.from(elems).forEach(v => v.addEventListener('click', function() {
this.parentElement.getElementsByClassName('links')[0].classList.toggle('hidden');
}));
.hidden {
display: none;
}
<li>
<div class="links">
<span>Test1 </span>
</div>
<div class="links">
<span>Test2</span>
</div>
</li>
<li>
<div class="links">
<span>Test3
</span></div>
<div class="links">
<span>Test4</span>
</div>
</li>
Your main issue here is that an element's id must be unique to that element. Other elements cannot have the same id. Instead, you can pass through the element into your showOrHide() method using this, and then get the next element using nextElementSibling. This will work provided your HTML structure is consistent:
function showOrHide(elem) {
if (window.innerWidth < 800) {
const div = elem.nextElementSibling;
if (!div.style.display || div.style.display == "block") {
div.style.display = "none";
} else {
div.style.display = "block";
}
}
}
<li>
<div id="image" onclick="showOrHide(this)">
<span>Test1</span>
</div>
<div class="links">
<span>Test2</span>
</div>
</li>
<li>
<div id="image" onclick=" showOrHide(this)">
<span>Test3</span>
</div>
<div class="links">
<span>Test4</span>
</div>
</li>
You can not use the same id lots of time on same HTML. Id attribute is unique, but you can use class.
You can use this code maybe it will help you.
<li>
<div class="image" onclick="showOrHide(this)">
<span>Test1
</span></div>
<div class="links">
<span >Test2</span>
</div></li>
<li>
<div class="image" onclick=" showOrHide(this)">
<span>Test3
</span></div>
<div class="links">
<span >Test4</span>
</div></li>
function showOrHide(element) {
if (window.innerWidth < 800) {
var div = element.closet(".links");
if (div.style.display == "block") {
div.style.display = "none";
} else {
div.style.display = "block";
}
}
}

Button Press in Flask

I'm using flask for my application and I want a div to appear when the user presses on one of the selected buttons. While this works for every button, the "liking feature" only works for the div in the first button. There is an unfilled heart favicon that I swap for a filled in one when the user presses the heart. However, this only works for the first div and not the rest and I can't seem to know why.
function like(status) {
console.log("here");
if (status == 'True') {
console.log(status);
document.getElementById('nofill').style.display = "none";
document.getElementById('fill').style.display = "inline-block";
} else if (status == 'False') {
console.log(status);
document.getElementById('fill').style.display = "none";
document.getElementById('nofill').style.display = "inline-block";
}
}
function showInfo(tag, button_id) {
console.log("Got to the actions.js file");
console.log(button_id);
var selected_tag_div = document.getElementById(tag);
var button = document.getElementById(button_id);
if (selected_tag_div.style.display === "none") {
selected_tag_div.style.display = "block";
selected_tag_div.style.textAlign = "left";
// selected_tag_div.style.backgroundColor = "#5BC0DE";
button.style.opacity = .7;
selected_tag_div.style.height = "100px";
} else {
selected_tag_div.style.display = "none";
button.style.backgroundColor = "#5BC0DE";
button.style.opacity = 1;
}
}
{% if output %}
<p class="section-title">Top #'s to use</p>
<div class="output-container text-center">
{% for tag in output %} {% set button_id = tag[1:] + "-btn" %}
<button type="button" onclick="showInfo('{{tag[1:]}}', '{{button_id}}')" id={{button_id}} class="btn btn-info tag_buttons">{{tag}}
</button>
<div class="selected-container row" id={{tag[1:]}} style="display: none">
<div class="col-sm-12">
<div class="like-button">
<span style="float: right;" onclick="like('True')"><i id='nofill' class="far fa-heart" style="color: #000000; font-size:1.5em; display: inline-block"></i></span>
<span style="float: right;" onclick="like('False')"><i id='fill' class="fas fa-heart" style="color: #FF0000; font-size:1.5em;"></i></span>
</div>
</div>
</div>
{% endfor %}
</div>
{% endif %}
HTML tag id attribute must be unique so you are not supposed to have elements with the same id in the DOM.
<span style="float: right;" onclick="like('True')"><i id='nofill' class="far fa-heart" style="color: #000000; font-size:1.5em; display: inline-block"></i></span>
<span style="float: right;" onclick="like('False')"><i id='fill' class="fas fa-heart" style="color: #FF0000; font-size:1.5em;"></i></span>
One option is to use class attribute instead of id:
<span style="float: right;" onclick="like('True')"><i class='nofill' class="far fa-heart" style="color: #000000; font-size:1.5em; display: inline-block"></i></span>
<span style="float: right;" onclick="like('False')"><i class='fill' class="fas fa-heart" style="color: #FF0000; font-size:1.5em;"></i></span>
Also look at how to use this keyword and learn more about JS events.

Show/Hide div element on button click

I have the following div:
<div class="margin-bottom hidden-xs"></div>
This div is hidden, when window is small by using bootstrap class 'hidden-xs', but I need to show/hide this div when user click on the button.
I am new in web, so question is how to do it in a proper way, by using angular, bootstrap...
Use ng-click. In your ng click you switch value from variable display. The directive ng-show / ng-hide work on css. If you need remove element from the DOM use ng-if instead of ng-show
JS
$scope.display = true;
$scope.switch = function(){
$scope.display =! $scope.display;
}
HTML
<div class="margin-bottom hidden-xs" ng-show="display"></div>
<button class="btn btn-primary btn-xs" ng-click="switch()">Click me !</button>
or if you don't need javascript.
HTML
<div ng-init="display = true">
<div class="margin-bottom hidden-xs" ng-show="display"></div>
<button class="btn btn-primary btn-xs" ng-click="display =! display">Click me !</button>
</div>
<button onclick="myfunction()">Hide/Show</button>
<div id="myDIV">
This is my DIV element.
</div>
<script>
function myfunction() {
var x = document.getElementById('myDIV');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
To toggle a display using only javascript you can try this
https://codepen.io/anon/pen/xrdKEM
function myFunction() {
var toggle = document.getElementsByClassName('margin-bottom')[0];
toggle.style.display = toggle.style.display == "none" ? "block" : "none";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="margin-bottom hidden-xs">
<h1>hello world</h1>
</div>
<input type="button" value="hide and show" onclick="myFunction()">
It can be easily done using javascript
function myFunction() {
var x = document.getElementById('showHide');
if (x.style.opacity === '0') {
x.style.opacity = '1';
} else {
x.style.opacity = '0';
}
}
<div id="showHide" class="margin-bottom hidden-xs" onclick="myFunction()">
This is my DIV element.
</div>

Check if a element is visible

I want to check if an element is visible and play a song only when it is, using: a trigger('click') event handler.
Unfortunately, I can't get it working as expected.
What am I doing wrong and how can I fix it?
Here is my JavaScript code (jQuery):
$('.overlay').on('click', function () {
if ($('a.icon-play').is(':hidden') == false) {
$('#stop').trigger('click');
} else {
$('#play').trigger('click');
}
});
Below is my HTML code:
<div class="info">
<div class="player-home-video">
<audio id="yourownlullaby-audio" src="uploads/downloads/Buenas%20%20Noches%20%3C?php%20echo%20$_POST['name'];%20?%3E.mp3"></audio>
</div>
<div class="thumbnail-home-video">
<a href="#" id="play">
<span class="icon-play preview-icon" id="play"></span>
</a>
<a href="#" id="stop">
<span class="icon-pause preview-icon" id="stop"></span>
</a>
<img class="info" src="img/thumbnail-home-video.png" />
<div class="overlay"></div>
</div>
</div>
$('.overlay').on('click', function () {
if ($('a .icon-play').is(':hidden') == true) {
$('#stop').trigger('click');
}
else
{
$('#play').trigger('click');
} });
Your​ if should be the other way.

Categories