Skryti/zobrazení textu - pomoc s nastavením – JavaScript, AJAX, jQuery – Fórum

Fórum › JavaScript, AJAX, jQuery

Skryti/zobrazení textu - pomoc s nastavením

mephcz

~ Anonymní uživatel
~ 2 příspěvky

24. 7. 2012 #1

Přeji dobrý den,
na stránce mám požitý skript na skrytí/zobrazení textu:

<head>
    <script type="text/javascript">
  function SwitchElementVisibility (AName)
  {
    var xElement;
    xElement = document.getElementById(AName);

    if (xElement.style.display == 'block'){
      xElement.style.display = 'none';
    } else {
      xElement.style.display = 'block';
    }
  }
</script>
</head>

a ve stránce potom:

<a href="#" onclick="SwitchElementVisibility('div_dil_01'); return(false);">zobrazit/skrýt</a>

<div style="display: none;" id="div_dil_01">skryty obsah</div>

vše funguje jak má, ale mám jeden požadavek který by mi ušetřil případné komplikace:

potřebuji aby při použití hide/unhide bylo předchozí hide/unhide automaticky schováno = vždy může být odkryto pouze jedeno textové pole né více najednou a odkrytí dalšího automaticky skryje aktuálně otevřené.

Předem díky za pomoc.

Daniel

Nahlásit jako SPAM

IP: 81.91.219.–

Nefaritus

~ Redaktor

Posthunter

Kultivátor příspěvků ve starém fóru – 3.66 % z celku

24. 7. 2012 #2

Můžeš dát všem těm divům stejnou classu a než pomocí toho getElementById() některý zobrazíš, tak je pomocí getElementByClassName() všechny skryješ:

document.getElementByClassName('class').style.display = 'none';

Nahlásit jako SPAM

IP: 109.238.43.–

mephcz

~ Anonymní uživatel
~ 2 příspěvky

24. 7. 2012 #3

přeji dobrý den, díska za reakci ale už se mi to podařilo na forech vypídit a funkčně implementovat níže přikládám zdrojáky:

k href="favicon.png" rel="icon" type="image/png" />
    <!-- This website template was downloaded from http://www.nuviotemplates.com - visit us for more templates -->
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="content-language" content="cz" />
    <meta name="robots" content="all,follow" />

    <meta name="author" lang="en" content="All: Your website name [www.your-website.com]; e-mail: info@your-website.com" />
    <meta name="copyright" lang="en" content="webdesign: Vit Dlouhy [Nuvio - www.nuvio.cz; NuvioTemplates - www.nuviotemplates.com]; e-mail: hello@nuviotemplates.com" />

    <meta name="description" content="..." />
    <meta name="keywords" content="..." />
    
    <link rel="stylesheet" media="screen,projection" type="text/css" href="css/main.css" />
    <!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="css/main-msie.css" /><![endif]-->
    <link rel="stylesheet" media="screen,projection" type="text/css" href="css/scheme.css" />
    <link rel="stylesheet" media="print" type="text/css" href="css/print.css" />

    <title>Trochá zábavy neuškodí</title>
    <script type="text/javascript">
	 function MyFunction(divName){
        
        //hidden val
        var hiddenVal = document.getElementById("tempDivName"); 
        
        //hide old
        if(hiddenVal.Value != undefined){
            var oldDiv = document.getElementById(hiddenVal.Value); 
            oldDiv.style.display = 'none'; 
        }
        
        //show div
            var tempDiv = document.getElementById(divName); 
            tempDiv.style.display = 'block';              
        
        //save div ID
            hiddenVal.Value = document.getElementById(divName).getAttribute("id");
                
        }
  function SwitchElementVisibility (AName)
  {
    var xElement;
    xElement = document.getElementById(AName);

    if (xElement.style.display == 'block'){
      xElement.style.display = 'none';
    } else {
      xElement.style.display = 'block';
    }
  }
</script>

a v textu:

<input id="tempDivName" type="hidden" />

<a href="#" onclick="MyFunction('div_dil_01');">zobrazit</a>
<a href="#" onclick="MyFunction('div_dil_02');">zobrazit</a>



<div style="display: none;" id="div_dil_01">skryty text </div>
<div style="display: none;" id="div_dil_02">skryty text </div>

Nahlásit jako SPAM

IP: 81.91.219.–

Vasek

~ Anonymní uživatel
~ 174 příspěvků

30. 11. 2012 #4

#3 mephcz
Díky moc, perfektně to běhá....

Nahlásit jako SPAM

IP: 93.92.55.–

Milan

~ Anonymní uživatel
~ 282 příspěvků

20. 10. 2016 #5

#1 mephcz

Dobrý den,

mám menší dotaz. Používám tento script a chci se zeptat, jak docílit toho, že první div bude zobrazen vždy, ale pokud si kliknu na druhý button, tak se tento první div skreje a zobrazí se na jeho místě obsah druhého divu.

Děkuji za pomoc.

Nahlásit jako SPAM

IP: 2a00:1028:96c4:248e:6550:...–

peter

~ Anonymní uživatel
~ 3982 příspěvků

20. 10. 2016 #6

po kliku
1. vse skryjes
2. zobrazis div, ktery te zajima

mimochodem, da se to prepsat

function SwitchElementVisibility (AName)
  {
    var xElement;
    xElement = document.getElementById(AName);

    if (xElement.style.display == 'block'){
      xElement.style.display = 'none';
    } else {
      xElement.style.display = 'block';
    }
  }

// ----

function SwitchElementVisibility (id)
  {
    var el;
    el = document.getElementById(id);
    if (!el) return;
    el.style.display = el.style.display!='none' ? 'none' : '';
  }
// porovnavat na block je nesmysl, protoze obecne to nemusi mit block v css, ale treba inline, table, table-row, inline-block a pod
// pokud el neexistuje, tak prohlizec umi zkapat na chybe pri pokusu nastavit//   xElement.style.display, takze je dobre tam pridat jedno ifko na detekci existence elementu

Nahlásit jako SPAM

IP: 2001:718:2601:26c:69f7:c1...–

← Zpět na seznam vláken ← Zpět do Fóra