Collapse

React collapse component toggles the visibility of content across your project with a few classes and some scripts. Useful for a large amount of content.

Usage

Example

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

Script


  const [collapse, setCollapse] = useState(false);
  const [collapse2, setCollapse2] = useState(false);

  const onEntering = () => {};
  const onEntered = () => {};
  const onExiting = () => {};
  const onExited = () => {};

  const toggle = (e)=>{
    setCollapse(!collapse);
    e.preventDefault();
  }

  // inner
  const toggle2 = (e)=>{
    setCollapse2(!collapse2);
    e.preventDefault();
  }

  return (
    <CCard>
      <CCollapse
        show={collapse}
        onEntering={onEntering}
        onEntered={onEntered}
        onExiting={onExiting}
        onExited={onExited}
      >
        <CCardBody>
          <p>
            Anim pariatur cliche reprehenderit,
            enim eiusmod high life accusamus terry richardson ad squid. Nihil
            anim keffiyeh helvetica, craft beer labore wes anderson cred
            nesciunt sapiente ea proident.
          </p>

          <CCard>
            <CCollapse
              show={collapse2}
            >
              <CCardBody>
                <p>
                  Anim pariatur cliche reprehenderit,
                  enim eiusmod high life accusamus terry richardson ad squid. Nihil
                  anim keffiyeh helvetica, craft beer labore wes anderson cred
                  nesciunt sapiente ea proident.
                </p>
              </CCardBody>
            </CCollapse>
            <CCardFooter>
              <CButton
                onClick={toggle2}
                className={'mb-1'}
              >
                Toggle Inner Collapse
              </CButton>
            </CCardFooter>
          </CCard>

        </CCardBody>
      </CCollapse>
      <CCardFooter>
        <CButton
          color="primary"
          onClick={toggle}
          className={'mb-1'}
        >
          Toggle Collapse
        </CButton>
      </CCardFooter>
    </CCard>
  )

# Features

Collapse animation
Optional duration and transition effect
Adapted to use in navbars

# Collapse API

Name	Type	Default Value
children	(ArrayOf(string) \| any)
main tag content
className	string
user classes for the main HTML tag
innerRef	(object \| Function \| string)
ref to the main tag
show	boolean	false
show state
navbar	boolean
set for collapse inside a navbar component