CODEWITHSUNDEEP
htmlcssreactjs
CraZyDroiD
CraZyDroiD

Reputation: 7105

Set CSS visibility to visible on button click - Reactjs

I'm trying to set a certain div to make visible on a button click event using reactjs. Is there a CSS only solution for this or do i have to handle it using reactjs. If so what's the approach I should take?

This is the div my buttons are placed

<div className="post_publish">
     <button className="preview_btn" href="#postpreview" onClick={this.preview}>Preview</button>
     <button className="post_btn">Post</button>
     <button className="cancel_btn" onClick={this.props.hideOverlay}>Cancel</button>
</div>

I want to make the following div visible when I click the preview button

<div className="post_preview" id="postpreview">

</div>

CSS used in post_preview div

.post_preview {
    width: 100%;
    height: 60%;
    position: fixed;
    visibility: hidden;
    margin-top: 100px;
}

Upvotes: 1

Views: 3026

Answers (1)

A. L
A. L

Reputation: 12639

You will have to use javascript/react. One way is to do it like this:

Change the div to this:

<div className="post_preview" id="postpreview" style={{visibility: this.state.visibility }}>

</div>

For the functions

function preview()
{
    this.setState({visibility: 'visible'})
}

function hide_preview()
{
    this.setState({visibility: 'hidden'})
}

You will need to use state in this (I'm assuming you know how this works). The functions preview and hide_preview will be attached to the buttons that you want to preview and hide .

Upvotes: 1

Related Questions