We Keep Coding

Hide specific Div based on text inside another div using JavaScript

I am trying to do logic using javascript, so that if div where class is b-format if innerhtml value is Audio it will hide cart-button div, else it will hide the more-button div. For some reason its not working.
var itemButtons = document.querySelectorAll('.slider-wrapper');
for(var i=0; i<itemButtons.length; i++){
var b_format_element = itemButtons[i].getElementsByClassName("b-format")[0];
var cart_element = itemButtons[i].getElementsByClassName("cart-button")[0];
var more_element = itemButtons[i].getElementsByClassName("more-button")[0];
if(b_format_element.innerHTML == "Audio"){
cart_element.style.display = "none";
} else {
more_element.style.display = "none";
}
}
this is html code
<div class="slider-wrapper">
${#Recommend} // this repeat record
<a class="product" href="#">
<div>
<p class="b-format">Audio</p>
</div>
<div class="product-items cart-button">
<span>Read more</span>
</div>
<div class="product actions product-items more-button">
<span>Read more</span>
</div>
</a>
${/Recommend}
</div>

Not good idea to use the same ID tags over and over in a loop. Instead, use a class name. Also, using querySelector will get you the first matching element. It also looks like you want to cycle through the inner DIVs of the slider-container, rather than cycling through multiple slider containers. I added an inner container .record.
document.querySelectorAll('.slider-wrapper .record').forEach(c => {
let isAudio = c.querySelector('.b-format')?.innerText.trim() === 'Audio';
c.querySelector('.cart-button').style.display = isAudio ? 'none' : 'block';
c.querySelector('.more-button').style.display = !isAudio ? 'none' : 'block';
})
.cart-button {
color: #f00;
}
.more-button {
color: #999;
}
<div class="slider-wrapper">
<div class='record'>
<div>
<p class="b-format">Audio</p>
</div>
<!-- buttom -->
<div class="cart-button">
<span>Les mer</span>
</div>
<div class="more-button">
<span>Les mer</span>
</div>
<!-- button end -->
</div>
<div class='record'>
<div>
<p class="b-format">Not Audio</p>
</div>
<!-- buttom -->
<div class="cart-button">
<span>Les mer</span>
</div>
<div class="more-button">
<span>Les mer</span>
</div>
<!-- button end -->
</div>
</div>

Hide div when input is empty

I need to hide a div when an input element is empty (the user has not typed anything in). I have tried this and this but they do not work for me. the div I want to hide has an id of search-result-container and the input has an id of search-input. I need to hide the div when the input is empty.
Here is the relevant part of my HTML code:
<!-- Html Elements for Search -->
<div id="search-container">
<input type="text" name="search-input" id="search-input" placeholder="🔎 type to search...">
<h1></h1>
<h1></h1>
<h1></h1>
</div>
</div>
<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>
<div class="container" id="search-result-container" class="show_hide">
<ul id="results-container"></ul>
<!-- Script pointing to search-script.js -->
<script src=[SEARCH JS]></script>
<!-- Configuration -->
<script>
SimpleJekyllSearch({
searchInput: document.getElementById('search-input'),
resultsContainer: document.getElementById('results-container'),
searchResultTemplate: '<h1>{title}</h1><h2 class="searchresults">{date}</span></h2>',
json: [JSON URL]
})
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</div>
</div>
Any help will be very much appreciated, Thank you in advance.

Here is a very simple way of doing what you want using jquery:
$('#search-input').on('input', function() {
$('#search-result-container').css('display', $(this).val() !== '' ? 'block' : 'none')
});
#search-result-container {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id ="search-input">
<div id="search-result-container">This will be hidden</div>

Based on both links you post:
HTML:
<input id="search-input" type="text" placeholder="Write here"/>
<div id="search-result-container" class="hide">
<p>
Results...
</p>
</div>
CSS:
.hide {
display: none
}
JS:
$('#search-input')
.on('keyup', function(e) {
var input = $(this).val();
input.length ?
$('#search-result-container').show() :
$('#search-result-container').hide();
})
JSFIDDLE

Use This Way:
<script>
// Your div id which you wants to hide
var hide = document.getElementById("yourDivId");
//Your input field id
var textarea = document.getElementById("YourInputFieldId");
//Simple Logic
if (textarea.value == "") {
hide.style.display = "none";
}
</script>

Trying to hide all visible divs and show just the selected one

The following code works to toggle visibility on and off, but I want to be able to hide any visible div and show only the one that is visible. Here is the HTML:
<div id="main">
<div id="hiddena">
</div>
<div id="hiddenb">
</div>
<div id="hiddenc">
</div>
<div id="hiddend">
</div>
<div id="hiddene">
</div>
</div>
<div id="buttona">
<button type=submit onclick="switchVisible('hiddena');"></button>
</div>
<div id="buttonb">
<button type=submit onclick="switchVisible('hiddenb');"></button>
</div>
<div id="buttonc">
<button type=submit onclick="switchVisible('hiddenc');"></button>
</div>
<div id="buttond">
<button type=submit onclick="switchVisible('hiddend');"></button>
</div>
<div id="buttone" class="tall">
<button type=submit onclick="switchVisible('hiddene');"></button>
</div>
And here is the script...
<script type="text/javascript">
function switchVisible(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
Does anyone have any suggestions or additions to the script that could accomplish this?

would it be a problem to hide all of them at once and then show up only the one you want?
function hide_them() {
var divsList = ["hiddena", "hiddenb", "hiddenc", "hiddend", "hiddene"]
divsList.forEach(function (element) {
element.style.visibility = "hidden";
});
}
finally, just call the hide_them function in the begining of your func:
function switchVisible(id) {
hide_them();
var e = document.getElementById(id);
e.style.display = 'block';
}
Another way is to select elements by tag, and hide them all (this is not pretty good way because when your code grows up, it may cause unwanted problems)

Few suggestions here
Never Mix your markup with javascript. You might consider binding the onclick at javascript by using addeventlistener or jQuery bind
Id should always be unique. If you want to have multiple elements the same name ,you might consider using class,because document.getelementsbyclassname always returns an array
3.In your show/hide logic, you are checking if the element is "block" or "none". When the element is displayed, by default element.style.display would be "" not "block"
check the following code snippet
function switchVisiblebyId(id){
var element=document.getElementById(id);
var displayStyle=element.style.display;
if(displayStyle==="" || displayStyle==="block"){
element.style.display="none";
}
else{
element.style.display="";
}
}
<div id="hiddena">
div1
</div>
<div id="hiddenb">
div2
</div>
<div id="hiddenc">
div3
</div>
<div id="hiddend">
div4
</div>
<div id="hiddene">
div5
</div>
<div id="buttona">button1
<button type=submit onclick="switchVisiblebyId('hiddena');"></button>
</div>
<div id="buttonb">button2
<button type=submit onclick="switchVisiblebyId('hiddenb');"></button>
</div>
<div id="buttonc">button3
<button type=submit onclick="switchVisiblebyId('hiddenc');"></button>
</div>
<div id="buttond">button4
<button type=submit onclick="switchVisiblebyId('hiddend');"></button>
</div>
<div id="buttone" class="tall">button5
<button type=submit onclick="switchVisiblebyId('hiddene');"></button>
</div>
Hope this helps

Hide all divs that contain an element inside

I have three divs with same class, inside theses divs I have others divs with two different class:
<div class="TotalResults">
<div class="resultPassed"></div>
</div>
<div class="TotalResults">
<div class="resultPassed"></div>
</div>
<div class="TotalResults">
<div class="resultError"></div>
</div>
I would like to hide all divs that have class="resultPassed" inside him. how can I do this with javascript or jquery?

This should work :
$('.resultPassed').parent().hide()

Try it :
$("div").has(".resultPassed").hide();
Final code :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="TotalResults">
<div class="resultPassed">I am resultPassed</div>
</div>
<div class="TotalResults">
<div class="resultPassed">I am resultPassed</div>
</div>
<div class="TotalResults">
<div class="resultError">I am not resultPassed</div>
</div>
<button class="btn">Hide</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn").on("click",function(){
$("div").has(".resultPassed").hide(1000);
})
})
</script>
</body>
</html>

In Jquery -
$('.resultPassed').parent().hide() will change the display to none.
In pure JS -
var arr = document.getElementsByClassName("resultPassed");
for (var i = 0; i < arr.length; i++) {
arr[i].parentNode.style.display = "none";
}

Copy the content of a div into another div

I have two divs on my website. They both share the same css properties, but one of them holds 24 other divs. I want all of these 24 divs to be copied into the other div.
This is how it looks like:
<div id="mydiv1">
<div id="div1">
</div>
</div id="div2>
</div>
//and all the way up to div 24.
</div>
<div id="mydiv2">
</div>
I want all of the 24 divs within mydiv1 to be copied into mydiv2 when the page loads.
Thanks in advance

Firstly we are assigning divs into variables (optional)
var firstDivContent = document.getElementById('mydiv1');
var secondDivContent = document.getElementById('mydiv2');
Now just assign mydiv1's content to mydiv2.
secondDivContent.innerHTML = firstDivContent.innerHTML;
DEMO
http://jsfiddle.net/GCn8j/
COMPLETE CODE
<html>
<head>
<script type="text/javascript">
function copyDiv(){
var firstDivContent = document.getElementById('mydiv1');
var secondDivContent = document.getElementById('mydiv2');
secondDivContent.innerHTML = firstDivContent.innerHTML;
}
</script>
</head>
<body onload="copyDiv();">
<div id="mydiv1">
<div id="div1">
</div>
<div id="div2">
</div>
</div>
<div id="mydiv2">
</div>
</body>
</html>

You can use the .ready() event of jquery
jQuery(document).ready(function() {
jQuery('.div1').html(jQuery("#div2").html());
}
Also a working DEMO.

var divs = document.getElementById('mydiv1').innerHTML;
document.getElementById('mydiv2').innerHTML= divs;

Alternative in jquery You can use clone and put it in your target div. Example:
$('#mydiv1').clone().appendTo('#mydiv2');
Copy #mydiv1 into #mydiv2

Try this one in 2022.
let clonedDiv = document.getElementById('myDiv').cloneNode(true);
document.body.appendChild(clonedDiv);