1

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;
}
Mukul Kant
  • 7,074
  • 5
  • 38
  • 53
CraZyDroiD
  • 6,622
  • 30
  • 95
  • 182
  • This'll probably help you out: http://stackoverflow.com/questions/13630229/can-i-have-an-onclick-effect-in-css – NoelB Feb 28 '17 at 05:20

1 Answers1

1

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 .

A. L
  • 11,695
  • 23
  • 85
  • 163
  • How is this changing the css of my post_preview div? My buttons are in a seperate div. – CraZyDroiD Feb 28 '17 at 05:39
  • inline styles have priority over css. Your buttons being inside a separate div shouldn't matter as long as the whole thing is inside the same component, it shouldn't matter – A. L Feb 28 '17 at 05:40
  • @CraZyDroiD well at least you know how to use `bind` and `state` :) – A. L Feb 28 '17 at 08:35