Skip to content

Instantly share code, notes, and snippets.

@monirshimul

monirshimul/toggleButton.js

Created January 8, 2020 05:17
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save monirshimul/4487f9049077f38a3ea85211a7e27bd8 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save monirshimul/4487f9049077f38a3ea85211a7e27bd8 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. monirshimul created this gist Jan 8, 2020.
    104 changes: 104 additions & 0 deletions toggleButton.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,104 @@
    import React, { Component } from "react";

    export class ToggleButton extends Component {

    state={
    surah:true,
    chapter:false,
    checkBtn:true
    }

    toggleChapter = ()=>{

    this.setState({
    surah:false,
    chapter:true,
    checkBtn:false
    })
    }

    toggleSurah = ()=>{

    this.setState({
    surah:true,
    chapter:false,
    checkBtn:true
    })
    }



    render() {

    const showSurah = (
    <div className="row d-flex justify-content-center mt-3">
    <div className="col-sm-4">
    <div className="card" style={{ boxShadow: "1px 2px 3px rgba(0, 0, 0, .1)" }}>
    <div className="card-body m-auto">
    <p>
    Al-Faatiha <span className="text-success">(الفاتحة)</span>{" "}
    <span className="text-info">The Opener</span>
    </p>
    <small>Details: Makkan / Ayat: 7 / Num: 1</small>
    </div>
    </div>
    </div>

    <div className="col-sm-4">
    <div className="card" style={{ boxShadow: "1px 2px 3px rgba(0, 0, 0, .1)" }}>
    <div className="card-body m-auto">
    <p>
    Al-Faatiha <span className="text-success">(الفاتحة)</span>{" "}
    <span className="text-info">The Opener</span>
    </p>
    <small>Details: Makkan / Ayat: 7 / Num: 1</small>
    </div>
    </div>
    </div>

    <div className="col-sm-4">
    <div className="card" style={{ boxShadow: "1px 2px 3px rgba(0, 0, 0, .1)" }}>
    <div className="card-body m-auto">
    <p>
    Al-Faatiha <span className="text-success">(الفاتحة)</span>{" "}
    <span className="text-info">The Opener</span>
    </p>
    <small>Details: Makkan / Ayat: 7 / Num: 1</small>
    </div>
    </div>
    </div>
    </div>
    );

    const showChapter = (
    <div>
    <h1>not Hello</h1>
    </div>
    );

    return (
    <div>
    <div className="row d-flex justify-content-center mt-4">
    <div className="radio mr-3">
    <label className="text-success" style={{cursor:"pointer"}}>
    <input type="radio" name="optradio" onClick={this.toggleSurah} checked={this.state.checkBtn} />&nbsp;
    Surah
    </label>
    </div>
    <div className="radio">
    <label className="text-warning" style={{cursor:"pointer"}}>
    <input type="radio" name="optradio" onClick={this.toggleChapter} />&nbsp;
    Chapter
    </label>
    </div>
    </div>
    {
    this.state.surah ? showSurah : showChapter
    }
    </div>

    );
    }
    }

    export default ToggleButton;