Come creare la pagina FAQ espandibile in HTML?

StackOverflow https://stackoverflow.com/questions/2403146

  •  18-09-2019
  •  | 
  •  

Domanda

Mi piacerebbe creare una pagina di FAQ per il mio sito web che elenca tutte le domande come collegamenti ipertestuali. Quando il link viene cliccato, la risposta per questa domanda dovrebbe espandersi fuori sotto di esso.

Le risposte devono essere nascosti di default, e, preferibilmente, cliccando sul link attiva la visibilità delle risposte.

Qualche idea?

Modifica

Ho provato molti dei suggerimenti, ma purtroppo sembra che Google Sites non consente alcuna di tale funzionalità nel codice HTML. Non posso usare gli script, stili, embed, iframe, o qualsiasi cosa accanto testo base formattazione sembrerebbe. Le grandi idee a tutti, ma sembra che dovrò accontentare di un indice stile FAQ.

È stato utile?

Soluzione

Esempio semplice utilizzando jQuery:

JavaScript / jQuery 

<script type="text/javascript">
$(document).ready(function(){
    $('.faqlink').click(function(){
        $('.content').hide();
        $(this).next('.content').show();
    });
});
</script>

CSS 

<style type="text/css">
.content {
    display: hidden;
}
</style>

HTML 

<h2>My FAQ</h2>
<a class="faqlink" href="#">Link 1</a>
<div class="content">lorem ipsum</div>
<a class="faqlink" href="#">Link 2</a>
<div class="content">lorem ipsum</div>
<a class="faqlink" href="#">Link 3</a>
<div class="content">lorem ipsum</div>

Altri suggerimenti

Ecco un possibile approccio: 

<html><body><script>

function toggleElement(id)
{
    if(document.getElementById(id).style.display == 'none')
    {
        document.getElementById(id).style.display = '';
    }
    else
    {
        document.getElementById(id).style.display = 'none';
    }
}
</script>
<p>
<a href="javascript:toggleElement('a1')">Is this a question?</a>
</p>
<div id="a1" style="display:none">
This is an answer.
</div>
</body>
</html>

Bene, avere le risposte in un contenitore div ciascuna di sotto della domanda.

I div avranno attributo display:hidden per impostazione predefinita.

Al momento cliccando sui link, questo stile CSS verrà rimosso con JavaScript.

Qualcosa di simile con Query (ha bisogno di prova per errori di battitura, ecc.): 

$(function()

  { $("a[name='Question1']").click(function()

    { $("div[name='Answer1']").removeClass("answer-hidden"); }); });

Nel codice HTML si utilizza questo schema: 

<div style="parentContainer">
  <div style="titleContainer" onclick="toggleContents(this)">Link to click on</div>
  <div style="contentContainer">Some content here.</div>
</div>

e nella commutazione JavaScript è semplice: 

function toggleContents(elm) {
  var contentContainer = elm.parentNode.getElementsByTagName("div")[1];
  contentContainer.style.display = (contentContainer.style.display == 'block') ? 'none' : 'block';
}

Si consiglia di studiare il codice di "FAQ espandibile" - è disponibile su GitHub: https://github.com/SolidMVC/ExpandableFAQ Ed è che ha mechanizm crollo espandere-avialable a /UI/Templates/Front/FAQsList.php ( https://github.com/SolidMVC/ExpandableFAQ /blob/master/UI/Templates/Front/FAQsList.php )

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top