First, I want to say if anyone can think of a better question title for this, let me know and I will edit.
What I am trying to do
I have text I am storing in a <div>{read_from_javascript_file}</div></div>. I want to be able to capture what the height of this div will be, and based upon a height size, a single button(SHOW MORE or COLLAPSE) will be displayed or hidden.
Also, the parent div <div><div>{read_from_javascript_file}</div></div> will expand/collapse depending on the height of the child div and the state of the button. For example...
- If the height of the child div is greater than
92px, the button will show, and the parent div will be set tomax-height: 69pxby default. - If the height of the child div is less than
92px, the button will not show, and parent div will be set tomax-height: noneby default. - If the state of the button is true(
COLLAPSEis showing), then the parent div will be set tomax-height: none.
If you want to see the full code sandbox, it can be reviewed here: https://codesandbox.io/s/accordian-with-draftjs-to-html-piy6z
Note: I've made it so clicking on the COLLAPSE/COLLAPSE button will console.log() the height of the current child div.
Below in the code on line 97, I need to replace true with something like (childDiv < 92)
Once that is done, I can use the same (childDiv < 92) condition to set the parent div to show as max-height: none and hide the button.
The code...
import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";
// Globals
import {
defaultSelectedPaginationTab,
getAvailablePaginatedTabs
} from "../Globals/Index.js";
const PaginationArticles = (props) => {
// Variables
const { articles } = props;
const numOfTotalArticles =
articles.articlesData.length * articles.articlesPerPage;
const numOfTotalTabs = Math.floor(
numOfTotalArticles / articles.articlesPerPage
);
const lastPage = numOfTotalTabs;
// const articleDescLinesHeight = 92; // px
const [selectedPaginationTab, setSelectedPaginationTab] = useState(
defaultSelectedPaginationTab
);
const [availablePaginatedTabs, setAvailablePaginatedTabs] = useState(
getAvailablePaginatedTabs(numOfTotalTabs, selectedPaginationTab)
);
const [isArticleMoreShown, setIsArticleMoreShown] = useState(
Array(numOfTotalArticles).fill(false)
);
const [
resetIsArticleMoreShownButton,
setResetIsArticleMoreShownButton
] = useState(false);
// const [arrArticlesDescHeights] = useState(Array.from(Array(articles.articlesData[selectedPaginationTab-1].length).fill(0)));
// console.log(arrArticlesDescHeights);
// Functions
const changePaginationTab = (ev, num) => {
ev.preventDefault();
if (selectedPaginationTab !== num) {
setSelectedPaginationTab(num);
setAvailablePaginatedTabs(getAvailablePaginatedTabs(numOfTotalTabs, num));
setIsArticleMoreShown(Array(numOfTotalArticles).fill(false));
}
};
const changeArticleMoreShownButton = (
divId,
index,
isArticleMoreShownStatus
) => {
isArticleMoreShown[index] = isArticleMoreShownStatus;
setResetIsArticleMoreShownButton(true);
// console.log('divId', divId);
console.log(document.getElementById(divId).clientHeight);
};
// Switch "READ MORE"/"COLLAPSE" buttons
useEffect(() => {
if (resetIsArticleMoreShownButton) {
setResetIsArticleMoreShownButton(false);
}
}, [resetIsArticleMoreShownButton]);
// Render
return (
<div>
{articles.articlesData[selectedPaginationTab - 1].map(
(article, index, articlesOnPage) => (
<div
key={index}
className="div-pagination-article"
style={
index === articlesOnPage.length - 1
? {}
: { borderBottom: "1px solid #cfcfd0" }
}
>
{article.img && <img src={article.img} alt="Announcement" />}
<div
className="div-pagination-article-content"
style={article.img ? { paddingTop: "20px" } : {}}
>
<h2>{article.title}</h2>
<h4>{article.date}</h4>
<div
className={
isArticleMoreShown[article.orderNum - 1]
? "div-pagination-article-desc-window show"
: "div-pagination-article-desc-window hide"
}
>
<div
id={`naa-article-description-${index}`}
dangerouslySetInnerHTML={{ __html: article.description }}
/>
</div>
{true && isArticleMoreShown[article.orderNum - 1] ? (
<button
onClick={() =>
changeArticleMoreShownButton(
`naa-article-description-${index}`,
article.orderNum - 1,
!isArticleMoreShown[article.orderNum - 1]
)
}
>
COLLAPSE ∧
</button>
) : (
<button
onClick={() =>
changeArticleMoreShownButton(
`naa-article-description-${index}`,
article.orderNum - 1,
!isArticleMoreShown[article.orderNum - 1]
)
}
>
READ MORE ∨
</button>
)}
{article.url &&
(article.isInternalSite ? (
<Link to={article.url}>LINK HERE</Link>
) : (
<a
href={article.url}
target="_blank"
rel="noopener noreferrer"
>
LINK HERE
</a>
))}
</div>
</div>
)
)}
<div className="div-pagination-tabs-container">
<div className="div-pagination-tabs">
{selectedPaginationTab === 1 ? (
<button className="btn-pagination-disabled-arrow-tab">
«
</button>
) : (
<button
className="btn-pagination-enabled-arrow-tab"
onClick={(ev) => changePaginationTab(ev, 1)}
>
«
</button>
)}
{selectedPaginationTab === 1 ? (
<button className="btn-pagination-disabled-arrow-tab"><</button>
) : (
<button
className="btn-pagination-enabled-arrow-tab"
onClick={(ev) =>
changePaginationTab(ev, selectedPaginationTab - 1)
}
>
<
</button>
)}
{availablePaginatedTabs.map((num) =>
selectedPaginationTab === num ? (
<button className="btn-pagination-selected-tab" key={num}>
{num}
</button>
) : (
<button
className="btn-pagination-unselected-tab"
key={num}
onClick={(ev) => changePaginationTab(ev, num)}
>
{num}
</button>
)
)}
{selectedPaginationTab === lastPage ? (
<button className="btn-pagination-disabled-arrow-tab">></button>
) : (
<button
className="btn-pagination-enabled-arrow-tab"
onClick={(ev) =>
changePaginationTab(ev, selectedPaginationTab + 1)
}
>
>
</button>
)}
{selectedPaginationTab === lastPage ? (
<button className="btn-pagination-disabled-arrow-tab">
»
</button>
) : (
<button
className="btn-pagination-enabled-arrow-tab"
onClick={(ev) => changePaginationTab(ev, lastPage)}
>
»
</button>
)}
</div>
</div>
</div>
);
};
export default PaginationArticles;
