collapsable attempt in App.js

import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import { Collapse, Button, CardBody, Card } from 'reactstrap';
// import './html5-styles.css'
// import logo from './TE-logo.svg'


class Accordion extends Component {
  constructor(props) {
    super(props);
    this.toggle = this.toggle.bind(this);
    this.toggle1 = this.toggle1.bind(this);
    this.toggle2 = this.toggle2.bind(this);
    this.toggle3 = this.toggle3.bind(this);
    this.toggle4 = this.toggle4.bind(this);
    this.toggle5 = this.toggle5.bind(this);

    this.state = { collapse: false, collapse1: false, collapse2: false, collapse3: false, collapse4: false };
    console.log(this.state);
  }

  toggle() { this.setState({ collapse: !this.state.collapse });  console.log(this.state.collapse); }
  toggle1() { this.setState({ collapse1: !this.state.collapse1 });   console.log(this.state.collapse1); }
  toggle2() { this.setState({ collapse2: !this.state.collapse2 });   console.log(this.state.collapse2); }
  toggle3() { this.setState({ collapse3: !this.state.collapse3 });   console.log(this.state.collapse3); }
  toggle4() { this.setState({ collapse4: !this.state.collapse4 });   console.log(this.state.collapse4); }
  toggle5() { this.setState({ collapse5: !this.state.collapse5 });   console.log(this.state.collapse5); }
  
  render() {
    return (
      <div>
        <div align="center" style={{ borderColor: 'Black', backgroundColor: '#add8e6', overflow: 'auto' }}>
        <br/><h5>TechExecRecruiter.com</h5><h6>Strategic Online Tools + Services</h6></div>
        <Button id="0" className="btn btn-primary btn-lg btn-block" color="secondary" onClick={this.toggle} style={{ borderColor: 'Black', marginBottom: '0rem' }}>Employers</Button>
        <Collapse id="0" isOpen={this.state.collapse}>
          <Card style={{ backgroundColor: 'Pink' }}>
            <CardBody >
            <div align="center" style={{ width: '50%', height: '50%', float: 'left' }}>Rapid Candidate Registration</div>
            <div align="center" style={{ width: '50%', height: '50%', float: 'right'}}>Rapid Employer Job Posting</div>
            </CardBody>
          </Card>
        </Collapse>

        <Button id="8" className="btn btn-primary btn-lg btn-block" color="secondary" onClick={this.toggle1} style={{ borderColor: 'Black', marginBottom: '0rem' }}>Employers</Button>
        <Collapse id="8" isOpen={this.state.collapse1}>
          <Card style={{ backgroundColor: 'Pink' }}>
            <CardBody >
            <div align="center" style={{ width: '50%', height: '50%', float: 'left' }}>Rapid Candidate Registration</div>
            <div align="center" style={{ width: '50%', height: '50%', float: 'right'}}>Rapid Employer Job Posting</div>
            </CardBody>
          </Card>
        </Collapse>

        <Button id="1" className="btn btn-primary btn-lg btn-block" color="secondary" onClick={this.toggle2} style={{  borderColor: 'Black', marginBottom: '0rem' }}>Candidates</Button>
        <Collapse id="1" isOpen={this.state.collapse2}>
          <Card>
            <CardBody align="left" >
            <ul>
            <li>DRY HTML String</li>
            <li>Sortify</li>
            <li>Left justify bullets at 20% left padded</li>
            <li>Set screen height and adjust on reveal.</li>
            <li><a target="_blank" rel="noopener noreferrer" href="https://v4-alpha.getbootstrap.com/components/collapse/">Separate Actions</a></li>
            <li><a target="_blank" rel="noopener noreferrer" href="http://modernizr.com">Modernizr</a></li>
            <li><a target="_blank" rel="noopener noreferrer" href="https://fonts.google.com/specimen/Noticia+Text">Button Fonts</a></li>
            <li>Button Color</li>
            <li>Button Height</li>
            <li>Card Font Sizes</li>
            <li><a target="_blank" rel="noopener noreferrer" href="http://vectorpaint.yaks.co.nz/">Logos</a></li>
            </ul>
            </CardBody>
          </Card>
        </Collapse>

        <Button id="2" className="btn btn-primary btn-lg btn-block" color="secondary" onClick={this.toggle3} style={{ borderColor: 'Black', marginBottom: '0rem' }}>Mobile Apps</Button>
        <Collapse id="2" isOpen={this.state.collapse3}>
          <Card>
            <CardBody>
           <ul>
           <li></li>
           <li></li>
           </ul>
            </CardBody>
          </Card>
        </Collapse>


        <Button id="3" className="btn btn-primary btn-lg btn-block" fontFamily='Noticia Text' color="secondary" onClick={this.toggle4} style={{ borderColor: 'Black', marginBottom: '0rem' }}>Support Services</Button>
        <Collapse id="3" isOpen={this.state.collapse4}>
          <Card >
            <CardBody>
             Job Sourcing & Talent Sourcing
             </CardBody>
          </Card>
        </Collapse>

        <Button id="4" className="btn btn-primary btn-lg btn-block" fontFamily='Noticia Text' color="secondary" onClick={this.toggle5} style={{ borderColor: 'Black', marginBottom: '0rem' }}>Strategic Roadmaps</Button>
        <Collapse id="4" isOpen={this.state.collapse5}>
          <Card  >
            <CardBody>
             Job Sourcing & Talent Sourcing
             </CardBody>
          </Card>
        </Collapse>

      </div>
    );
  }
}

export default Accordion;