We Keep Coding

Trigger DIV content on button click + change button text

I am trying to trigger the visibility of a DIV via a button.
My code looks like this:
function myFunction() {
var moreText = document.getElementById("csrmore");
var x = document.getElementById("myDIV");
let ishidden = x.classList.contains("hidden")
if (ishidden == true) {
x.classList.remove("hidden");
x.classList.add("shown");
moreText.innerHTML = "Show less";
}
else {
x.classList.remove("shown");
x.classList.add("hidden");
moreText.innerHTML = "Show more";
}
}
div {
width: 100px;
height: 100px;
}
.hidden {
display:none
}
.shown {
display:block;
}
<button id="csrmore" onclick="myFunction()">
Show more
</button>
<div id="myDIV" class="hidden">
This is the triggerable content.
</div>
Fiddle: https://jsfiddle.net/6zxa0Lg2/
It works fine, however since I am a JS starter, I was wondering if this is bad practice or is it a totally fine piece of code?
Thanks for every help :)

Here's another way to go about it. Make it all relative. The button is clicked and the javascript finds the content associated to that button to show/hide. This way you don't need any ID tags and you can have as many show/hide buttons as you want on the page.
document.addEventListener('DOMContentLoaded', () => {
// after the page loads...
document.querySelectorAll('.csrmore').forEach(button => {
// find all the 'show more' buttons and for each one...
button.addEventListener('click', e => {
// when someone clicks this button
let content = e.target.closest('.container').querySelector('.content');
// find the content div associated with this button
content.classList.toggle('hidden');
// toggle on or off the content
e.target.innerText = content.classList.contains('hidden') ? 'Show more' : 'Hide';
// change the text of the button
})
})
})
div {
width: 100px;
height: 100px;
}
.hidden {
display: none
}
<div class='container'>
<button class="csrmore">
Show more
</button>
<div class="content hidden">
This is the triggerable content.
</div>
</div>
<hr>
<div class='container'>
<button class="csrmore">
Show more
</button>
<div class="content hidden">
This is the triggerable content.
</div>
</div>

This is a fine way to do this! This is not the solution I would not have come up with, but it is actually pretty clever. I would have thought to have done it by toggling TARGET.style.visibility to either "hidden" or "visible" when clicking the button. Again though, your code looks perfectly fine!

hide / show div with a button not in the same div

I'm using elementor for my wordpress site and I wish to have a button in a first div (section) that control if a second and separate div (section) is display or not. I've tried to use the checkbox hack but it's working only if the checkbox is in the div as the content https://css-tricks.com/the-checkbox-hack/
Is there a solution to use CSS or even javascript ? If you advice to me to use javascript I'll put in my function.php file and as I'm begginer in javascript can you please write all the function I have to implement into my function.php file.
Basically it means :
<div>button</div> <div>content to show and hide on click on the button</div>
Best regards,
Clément

You can use Jquery:
1-Put an id to your DIV
<div id = "btn_show"> button </div> <div id = "show"> content to show and hide on click on the button </div>
2-Call jquery to display it
$("#btn_show").click(function(){
$("#show").show();
//or
$("#show").hide();
});
And jquery you can call it with CDN
<script src="https://code.jquery.com/jquery-3.6.0.js"</script>

In javascript without any library this could be very easy but you need to put an id on your divand your button.
<div id="myButton">button</div>
<div id="myDiv">
content to show and hide on click on the button
</div>
Then you just add a script section like this : (it just need to be after your div and your button in the DOM)
<script>
var myDiv = document.getElementById('myDiv');
var myButton = document.getElementById('myButton');
myButton.addEventListener('click', e => {
myDiv.classList.toggle('visible'):
});
</script>
And at last, you need a css like this:
.visible {
display: none;
}

Thanks for all of yours answers! Here what I use:
<button onclick="myFunctionopenclose()">Click Me</button>
<div id="myDiv" style="display:none;">content to hide and show</div>
<script> function myFunctionopenclose() {
var x = document.getElementById("myDiv");
if (x.style.display === "block") {
x.style.display = "none"; }
else {
x.style.display = "block";}}
Best regards,
Clément

Hide and show button

I have a task in school and I think Javascript is really hard. Now in the beginning I need to google everything and I only find solutions in different libraries.
In this case I need to use Vanilla JS. When I click on logout button it need to toggle and show the login button.
In the task I cant change the HTML only add JS.
// student
<button class="signin-btn is-hidden">Log in </button>
<button class="signout-btn">Log out </button>

You can add click event listeners to both of the buttons to change its own display to none and display the other button.
var login = document.querySelector('.signin-btn'),
logout = document.querySelector('.signout-btn');
login.addEventListener('click', function(e){
this.classList.add('is-hidden');//adds is-hidden class
logout.classList.remove('is-hidden');//removes is-hidden class
});
logout.addEventListener('click', function(e){
this.classList.add('is-hidden');
login.classList.remove('is-hidden');
});
.is-hidden{
display: none;
}
<button class="signin-btn is-hidden">Log in </button>
<button class="signout-btn">Log out </button>

here's a extremely basic way to do it, I would recommend using more advanced techniques later
function change() {
document.getElementById('but').style.display = "none"
document.getElementById('butother').style.display = "block"
}
function changeother() {
document.getElementById('butother').style.display = "none"
document.getElementById('but').style.display = "block"
}
<html>
<body>
<button id="but" onclick='change()'>log in </button>
<button id="butother" onclick='changeother()'>log out </button>
</body>
</html>

How can I show content when I click a button

I want to show an image when I click on the button. But right now the button hides the image when I click on it. Is there a way to reverse this? This is the code I have.
var flag = 1;
function coursework() {
if (flag == 1) {
document.getElementsById("coursework").style.display = "none";
flag = 0;
} else {
document.getElementById("coursework").style.display = "block";
flag = 1;
}
}
<button onclick="coursework()">Show Coursework</button>
<div id="coursework">
<img src="Wellcome.png" width="300">
</div>
Thank you :)

You can set the image to display: none; initially and then change your if-else condition accordingly so that the image is displayed on first click and hide on second click and so on. Also, it should be getElementById and not getElementsById.
document.getElementById("coursework").style.display="none";
var flag =1;
function coursework() {
if(flag==1)
{
document.getElementById("coursework").style.display="block";
flag=0;
}
else{
document.getElementById("coursework").style.display="none";
flag=1;
}
}
<button onclick="coursework()">Show Coursework</button>
<div id="coursework">
<img src="https://images.pexels.com/photos/87840/daisy-pollen-flower-nature-87840.jpeg?auto=compress&cs=tinysrgb&h=350" width="300">
</div>

I am assume scenario that initially you hide image and when click on button it will show it, may be it will different from what you want and try to give this answer. Refer following code
<html>
<body>
<button onclick="show()">Show Coursework</button>
<div id="coursework" style="display:none">
<img src="welcome.png" width="300">
</div>
<script>
function show(){
document.getElementById("coursework").style.display="block";
}
</script>
</body>
</html>
hope this will help full.

display button onclick pop up close button

Onclick button "button1" , we are displaying pop up box and hiding "button1".
but now we want to display the "button1" once we click on "close" button of "pop up box"
pop up close button code
<a href="javascript:void(0)" class="close">
<input type="button" onclick="showDiv()" style="display:none;" />
</a>
function showDiv() {
document.getElementById('aitcg-control-panel').style.display = "block";
}
button1 code
<div id="aitcg-control-panel"><button>button1</button></div>
Edit
I tried this code : document.getElementById('aitcg-control-panel').style.display = "block"; but still it didt worked for me....

After looking into your website you've provided i found out that the elements you wanted to reappear were removed from the page.
Why don't you just keep the button instead? Because after saving the item it refreshes the page anyway.
There should be any javascript code in the module (aitcg) you've installed on your site that removes the elements aitcg-toolbox-{{somenumber}} and aitcg-control-pane from the page.
I hope this could be of any help.

Is this what you were looking for? I'm sure there is a cleaner way to do it, but your question wasn't super clear.
function showDiv() {
document.getElementById('aitcg-control-panel').style.display = "block";
document.getElementById('ShowDivButton').style.display = "none";
}
function hideDiv() {
document.getElementById('aitcg-control-panel').style.display = "none";
document.getElementById('ShowDivButton').style.display = "initial";
}
div{
width: 200px;
height: 200px;
background: red;
display: none;
}
<button id='ShowDivButton' onclick="showDiv()">Open Div</button>
<div id="aitcg-control-panel" >
<button id='ShowDivButton' onclick="hideDiv()">Close Div</button>
</div>

I've sincerely not fully understood your question. But from what you've said, I'm assuming this is what you want:
function display(a) {
//Hide the button
a.style.display = "none";
//You need setTimeout for the code to wait for the alert to show the button again
setTimeout(function() {
alert('ok');
a.style.display = "block";
}, 100);
}
<button onclick="display(this);">Click me</button>
Hope it helps in some way and if this is not what you wanted, please reply.

after giving link for you website. i can tell you the reason why its not working for you.
on click of save design you are removing code for aitcg-control-panel
that's why you are not able to show it back
proof: before clicking code for button div exists
After click on save design
proof:
code is not there. that's why you are not able to show.
i debugged your code i found one function
_getControlPanelHtml: function()
{
if (this.config.editorEnabled) {
var returnHtml = "";
returnHtml += '<div id="aitcg-control-panel" style="display:none">' +
'<button onclick="return setproductlogin(\'null\', event);" class="aitcg-button apply-but" id="submit-editorApply-{{rand}}" title="{{apply_text}}">{{apply_text}}</button>' +
'<button class="aitcg-button reset-but" id="submit-editorReset-{{rand}}" title="{{reset_text}}">{{reset_text}}</button>' +
'</div>';
return returnHtml;
}
return '';
},
in this function they are returning '';
please change this function or other function to give you the same code what you had before clicking.