logo
Tags down

shadow

on button click make div visible


By : Monchi chi
Date : May 04 2020, 04:26 PM

I have  html code like 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 good  if the "image_change" div is in the "scrollbar" div, but if you click away then it disappears.

Thanks in advance!

Answer :

by 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>



Share : facebook icon twitter icon
Related Posts Related Posts :
  • clear array after form submit
  • pass url variable to javascript
  • access data using api
  • div position fixed css
  • add horizontal line between two div
  • disable toggle button css
  • css fixed line height
  • background image not working
  • table cell border
  • text line break css
  • overlay div on div
  • text direction rtl css
  • javascript convert string to an object
  • bind inner div click to outer div
  • jquery ajax oncomplete
  • how to use promise in for loop
  • jquery get element using variable
  • javascript send textbox value
  • pass div class content to another class or id
  • css new line after element
  • css calc not working properly
  • link disabled jquery
  • sql join table to subquery
  • MS Access SQL Issue with OR AND Operators
  • set textarea value using php
  • php merge two arrays into one
  • php form with google captcha
  • update current row in php
  • php date format mysql
  • mysql pdo select query
  • php function return an array
  • PHP mysqldump database to sql file
  • display image query
  • php create array using foreach loop
  • associative array php
  • group_concat in mysql laravel
  • php array_push empty
  • mysql on update cascade not working
  • pdo insert prepared statement
  • mysql insert ignore vs on duplicate key
  • mysql insert into existing row
  • mysql multi insert query
  • mysql group by show all rows
  • php change profile image
  • combine multiple arrays into one array php
  • how to sum values in an array
  • how to get sum of the total time
  • How to Create Facebook live stream without notification using API ?
  • css affect another element on hover
  • insert line after paragraph word
  • shadow
    Privacy Policy - Terms - Contact Us © bighow.org