Answers.Body: <p>Javascript would be the best way to do this, but as you note, not all ebook reading systems support Javascript&mdash;in fact, very few of them beyond iBooks do. Without Javascript, this isn't really possible, unfortunately. The doppletext site that you link to uses Javascript, for example.</p>
  
  <p>Ebook reading systems support a fairly limited subset of HTML and CSS. Of particular relevance, most of them do not support the advanced CSS selectors like the type being used in the checkbox hack that you link&mdash;there's no selecting the adjacent sibling.</p>
  
  <p>The only other option that I can think of is epub 3.0's <a href="http://www.idpf.org/epub/30/spec/epub30-contentdocs.html#sec-xhtml-epub-trigger" rel="nofollow"><code>epub:trigger</code></a>. Unfortunately, at present that only allows you to toggle <code>visibility:hidden</code> and not <code>display:none</code>, which means the space the invisible paragraphs take up will still be there, so you'll have giant translation-sized holes in your text. Even if the IDPF adds a <code>display</code> control to <code>epub:trigger</code>, epub 3 support in reading systems is sadly lacking (despite it being the approved standard for two and a half years now), so that probably won't get you any farther than using Javascript.</p>
  
  <p>Sorry for being the bearer of bad news! I'd love to be proven wrong on this&mdash;I've worked on several ebook projects that could benefit from this type of thing, and have never been able to find a way to do this acceptably other than with Javascript.</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-04-25T18:32:23.137Z
Answers.Text: Then how do they get it to work on Kindle devices? I assumed they were using javascript for IBooks, but I thought you couldn't do that with Kindle. They got it to work somehow. What are they doing exactly? Does that mean that they have selected to only support a subset of all of the reading platforms?
Answers.UserDisplayName: j.jerrod.taylor
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-04-25T18:37:46.047Z
Answers.Text: It looks like on the Kindle, you aren't actually using the reading system; you're instead accessing the content via the Kindle's built-in web browser. Here's a writeup: http://www.the-digital-reader.com/2012/03/06/doppletext-launches-unique-bilingual-ebook-service/
Answers.UserDisplayName: Tom
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-05-04T15:54:03.617Z
Answers.Text: I think that the "correct" way to go for this kind of application consists in properly marking up the content, and let the reading system take care of it. Sadly, IDPF does not care. I supervise(d) a project about an EPUB 3 Android app specialized for parallel texts: https://github.com/pettarin/epub3reader (For coding simplicity, it relied on a naming convention, but you can clearly indicate the mapping with a markup approach.)
Answers.UserDisplayName: Alberto Pettarin
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-05-04T16:01:11.370Z
Answers.Text: 2/2: in Menestrello app ( https://readbeyond.it/menestrello/index.html ) we implemented code that recognizes elements with attributes in a special namespace, and it allows you to tap on a paragraph (say, in English), and have a bottom panel appear containing its translation (say, in Italian), see this screenshot: http://t.co/MoW2vjxfiK If the reading system does not support this features, it just behaves like a normal `<a>`.
Answers.UserDisplayName: Alberto Pettarin
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-04-25T17:12:31.710Z
Answers.LastActivityDate: 2014-04-25T17:12:31.710Z
Answers.UserDisplayName: Tom
Body: <p>I'm trying to make a multilingual ebook where I have two different translations of the same story. I'm trying to get it so that you can toggle the language by clicking on individual paragraphs. I asked <a href="https://stackoverflow.com/questions/23038311/how-do-i-toggle-multiple-divs-individually">a similar question</a> on Stackoverflow a while ago but I found out that not all ereaders support Javascript.</p>
  
  <p>I thought that I'd try doing it with only CSS. I just <a href="http://css-tricks.com/the-checkbox-hack/" rel="nofollow noreferrer">the checkbox hack</a> that I found on <a href="https://stackoverflow.com/questions/10127618/how-can-i-toggle-a-div-to-reveal-content-with-css">this</a> Stackoverflow thread, but that didn't work. How can I recreate a toggle effect on ereaders.</p>
  
  <p>Even though it may be difficult, I've <a href="http://www.doppeltext.com/en/" rel="nofollow noreferrer">seen it done before</a>.</p>
  
Tags: <epub><html><css>
Title: How can I toggle text reliably across all ereaders in an epub file?
UserDisplayName: j.jerrod.taylor
ThreadText: # How can I toggle text reliably across all ereaders in an epub file?
  
  (Asked by: username_0 on 2014-04-25)
  
  I'm trying to make a multilingual ebook where I have two different translations of the same story. I'm trying to get it so that you can toggle the language by clicking on individual paragraphs. I asked [a similar question](https://stackoverflow.com/questions/23038311/how-do-i-toggle-multiple-divs-individually) on Stackoverflow a while ago but I found out that not all ereaders support Javascript.
  
  I thought that I'd try doing it with only CSS. I just [the checkbox hack](http://css-tricks.com/the-checkbox-hack/) that I found on [this](https://stackoverflow.com/questions/10127618/how-can-i-toggle-a-div-to-reveal-content-with-css) Stackoverflow thread, but that didn't work. How can I recreate a toggle effect on ereaders.
  
  Even though it may be difficult, I've [seen it done before](http://www.doppeltext.com/en/).
  
  **Tags:** epub, html, css
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2014-04-25. Score: 1
  
  Javascript would be the best way to do this, but as you note, not all ebook reading systems support Javascript—in fact, very few of them beyond iBooks do. Without Javascript, this isn't really possible, unfortunately. The doppletext site that you link to uses Javascript, for example.
  
  Ebook reading systems support a fairly limited subset of HTML and CSS. Of particular relevance, most of them do not support the advanced CSS selectors like the type being used in the checkbox hack that you link—there's no selecting the adjacent sibling.
  
  The only other option that I can think of is epub 3.0's [`epub:trigger`](http://www.idpf.org/epub/30/spec/epub30-contentdocs.html#sec-xhtml-epub-trigger). Unfortunately, at present that only allows you to toggle `visibility:hidden` and not `display:none`, which means the space the invisible paragraphs take up will still be there, so you'll have giant translation-sized holes in your text. Even if the IDPF adds a `display` control to `epub:trigger`, epub 3 support in reading systems is sadly lacking (despite it being the approved standard for two and a half years now), so that probably won't get you any farther than using Javascript.
  
  Sorry for being the bearer of bad news! I'd love to be proven wrong on this—I've worked on several ebook projects that could benefit from this type of thing, and have never been able to find a way to do this acceptably other than with Javascript.
  
  > **Comments:**
  > **username_0**: Then how do they get it to work on Kindle devices? I assumed they were using javascript for IBooks, but I thought you couldn't do that with Kindle. They got it to work somehow. What are they doing exactly? Does that mean that they have selected to only support a subset of all of the reading platforms?  
  > **username_1**: It looks like on the Kindle, you aren't actually using the reading system; you're instead accessing the content via the Kindle's built-in web browser. Here's a writeup: http://www.the-digital-reader.com/2012/03/06/doppletext-launches-unique-bilingual-ebook-service/  
  > **username_2**: I think that the "correct" way to go for this kind of application consists in properly marking up the content, and let the reading system take care of it. Sadly, IDPF does not care. I supervise(d) a project about an EPUB 3 Android app specialized for parallel texts: https://github.com/pettarin/epub3reader (For coding simplicity, it relied on a naming convention, but you can clearly indicate the mapping with a markup approach.)  
  > **username_2**: 2/2: in Menestrello app ( https://readbeyond.it/menestrello/index.html ) we implemented code that recognizes elements with attributes in a special namespace, and it allows you to tap on a paragraph (say, in English), and have a bottom panel appear containing its translation (say, in Italian), see this screenshot: http://t.co/MoW2vjxfiK If the reading system does not support this features, it just behaves like a normal `<a>`.  
  
  ---
  
  