使用ID和哈希显示/隐藏div

Question

I'm looking to create a simple show/hide div set up using IDs and hash values. If you click the link, which has a hash value, it shows the div with the same ID as the hash. I know there's a few tools out there, but I'd prefer to do this using jQuery/JS if possible.

One thing to note is that all the hashes, and IDs are pulled in dynamically from the CMS based on the page title, then sanitises it — so I can't hard-code any IDs or hashes in the jQuery.

Here's my set up:

<div class="menu">
  <ul>
    <li><a href="#aquatic-health">Aquatic Health</a></li> 
    <li><a href="#environment">Environment</a></li> 
  </ul>
</div>

<div id="aquatic-health">
  <p>Lorem ipsum dolor sit amet, vel vide elaboraret persequeris at, clita vitae eirmod in eos, eros nostrud apeirian ea per.&nbsp;Lorem ipsum dolor sit amet, vel vide elaboraret persequeris at, clita vitae eirmod in eos, eros nostrud apeirian ea per.&nbsp;Lorem ipsum dolor sit amet, vel vide elaboraret persequeris at, clita vitae eirmod in eos, eros nostrud apeirian ea per.</p> <p>Lorem ipsum dolor sit amet, vel vide elaboraret persequeris at, clita vitae eirmod in eos, eros nostrud apeirian ea per.</p>
</div>
<div id="environment">
  <p>Lorem ipsum dolor sit amet, vel vide elaboraret persequeris at, clita vitae eirmod in eos, eros nostrud apeirian ea per.&nbsp;Lorem ipsum dolor sit amet, vel vide elaboraret persequeris at, clita vitae eirmod in eos, eros nostrud apeirian ea per.&nbsp;Lorem ipsum dolor sit amet, vel vide elaboraret persequeris at, clita vitae eirmod in eos, eros nostrud apeirian ea per.</p> <p>Lorem ipsum dolor sit amet, vel vide elaboraret persequeris at, clita vitae eirmod in eos, eros nostrud apeirian ea per.</p>
</div>

Many many thanks in advance, R

Answer 1

You can try this :

$('.menu a').on('click', function(){
    $( $(this).attr('href') ).toggle(); // prop() can be used
});

fiddle :

http://jsfiddle.net/FsCHV/

Answer 2

Something like this (if you can add a class to each content div when they are generated) :

EDIT => display the first div by default

http://jsfiddle.net/eNTtN/3/

HTML :

<div class="menu">


<ul>
    <li><a href="#aquatic-health">Aquatic Health</a></li> 
    <li><a href="#environment">Environment</a></li> 
  </ul>
</div>

<div class="hidden" id="aquatic-health">
  <p>Lorem ipsum dolor sit amet, vel vide elaboraret persequeris at, clita vitae eirmod in eos, eros nostrud apeirian ea per.&nbsp;Lorem ipsum dolor sit amet, vel vide elaboraret persequeris at, clita vitae eirmod in eos, eros nostrud apeirian ea per.&nbsp;Lorem ipsum dolor sit amet, vel vide elaboraret persequeris at, clita vitae eirmod in eos, eros nostrud apeirian ea per.</p> <p>Lorem ipsum dolor sit amet, vel vide elaboraret persequeris at, clita vitae eirmod in eos, eros nostrud apeirian ea per.</p>
</div>
<div class="hidden" id="environment">
  <p>Blabla</p>
</div>

CSS

.hidden{
    display: none;
}

JS

$(document).ready(function(){
    $(".menu li a").click(function(){
        $(".hidden").hide();
        $($(this).attr("href")).show();
    });
    /* Show the first div by default */
    $(".hidden:first").show();
});

Answer 3

Try this.

$(.menu li a).click(function(){
var hrefValue = $(this).attr("href");
$(hrefValue).toggle();
});

Answer 4

$(function(){
  $('.menu').find('a').on('click', function(){
    var dest = $(this).attr('href');
    $(dest).slideToggle();
  });
});

Answer 5

This will do..

$(document).ready(function() {

    $('.menu a').click(function() {
        var id = $(this).attr('href');
        $(id).css('display', 'block');
    });

});

Or you can use a toggle

$(document).ready(function() {

        $('.menu a').click(function() {
            var id = $(this).attr('href');
            $(id).toggle();
        });

    });

http://jsfiddle.net/FZTmH/

You can make yourself a close button.