When a button is pressed a div field is visible - html

Question

I have a button in a div container for a scroll box with some profile info, and my goal is when you press the button the div appears (display: initial;), and when you press it again it disappears (display: none;) Any ideas?
Html:
<div>
<div class="scrollbar">
<input type="button" class="profile_info">Profile Picture
<div class="image_change">This is Blue</div>
</div>
</div>
Css:
div.scrollbar {
display: inline-block;
overflow: hidden;
background-color: #f1f1f1;
overflow: auto;
width: 250px;
height: auto;
max-height: 600px;
padding: 22px;
margin: 15px;
position: relative;
word-wrap: break-word;
}
.profile_info {
text-decoration: none;
color: Black;
cursor: pointer;
}
input.profile_info:focus {
color: Red;
}
input.profile_info:focus ~ .image_change {
display: block;
}
.image_change {
display: none;
position: relative;
height: 200px;
width: 200px;
background-color: Blue;
}
It sort of works if the "image_change" div is in the "scrollbar" div, but if you click away then it disappears.
Thanks!

Answer 1

Since selecting a parent element with CSS is not possible obviously its also not possible to select it's adjacent one....i would suggest the following approach using javascipt :
var image = document.getElementsByClassName('image_change')[0]
var input = document.querySelector('input')
input.addEventListener('click',function(e){
if(image.style.display == '') {
image.style.display = 'block'
} else {
image.style.display = ''
}
})
div.scrollbar {
display: inline-block;
overflow: hidden;
background-color: #f1f1f1;
overflow: auto;
width: 250px;
height: auto;
max-height: 600px;
padding: 22px;
margin: 15px;
position: relative;
word-wrap: break-word;
}
.profile_info {
text-decoration: none;
color: Black;
cursor: pointer;
}
input.profile_info:checked {
color: Red;
}
.image_change {
position: relative;
display : none;
height: 200px;
width: 200px;
background-color: Blue;
}
<div>
<div class="scrollbar">
<input type="checkbox" class="profile_info">Profile Picture
</div>
<div class="image_change">
This is a Blue div
</div>
</div>