HTML -макет для статического двуязычного текста: как скрыть один язык? ⇐ Html

[Anonymous]

Имея двуязычный текст, я хочу отобразить параграфы рядом. Каждый абзац расположен внутри TD , два связанных параграфа формируют один tr . Таким образом, соответствующие абзацы выровнены по горизонтали. Результат прост и почти удовлетворительен:

Источник HTML выглядит как:

Код: Выделить всё

table { width: 100%; }
td { padding-right: 2em; vertical-align: top; width: 50%; }
.no { padding-right: 1em; font-size: x-small; color: maroon; }
td img {display: block; margin-left: auto; margin-right: auto; }




This is the text in one language.
Toto je text v druhém jazyce.


This is a long text [...] needed.
Toto je dlouhý text [...] potřeby.


This is a long text [...] needed.
Toto je dlouhý text [...] potřeby.





Let the next chapter starts after the horizontal line.
Další kapitola je oddělena vodorovnou čárou.


This is a long text [...] needed.
Toto je dlouhý text [...] potřeby.


This is a long text [...] needed.
Toto je dlouhý text [...] potřeby.




< /code>
Я хотел бы добавить функциональность, чтобы иметь возможность: или скрыть один из языков или перемещать разветвитель между языками. Цель состоит в том, чтобы представить выбранный язык, и только тогда, когда пользователь хочет видеть обоих бок о бок. Есть ли недостаток?    


.row { display: flex; justify-content: space-between; margin-bottom: 0.5rem; }
.row p { flex: 1; margin: 0; padding: 0 1rem; }
.hidden { display: none !important; }


function toggleLang(n) {
const rows = document.getElementsByClassName('row');
for (let i = 0; i < rows.length; ++i) {
rows[i].children[n].classList.toggle('hidden');
}
}



Toggle first
Toggle second

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Подробнее здесь: https://stackoverflow.com/questions/796 ... e-language