Home/ Questions/Q 8962157
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T16:04:30+00:00

I’m new to jquery and have written the following code to toggle between content

  • 0

I’m new to jquery and have written the following code to toggle between content divs for a page I’m designing. I want the three content divs to be hidden by default and then if a header is clicked I want that content div to be visible. I want the divs to close automatically if a different header is clicked so only one is visible at a time.

I thought this code would work but it doesn’t seem to be for some reason.

Code:

<head>

<script type="text/javascript" language="javascript">

$('document').ready(function(){

$('#partnersContent').hide();
$('#companyContent').hide();
$('#investmentsContent').hide();

$('#partnersHeader').click(function(){
    $('#partnersContent').slideToggle('1000');
    $('#companyContent').hide('bind');
    $('#investmentsContent').hide('bind');
});

$('#companyHeader').click(function(){
    $('#companyContent').slideToggle('1000');
    $('#partnersContent').hide('bind');
    $('#investmentsContent').hide('bind');
});

$('#investmentsHeader').click(function(){
    $('#investmentsContent').slideToggle('1000');
    $('#companyContent').hide('bind');
    $('#partnersContent').hide('bind');
});

});
</script>
</head>

<body>

<div id='partners'>
    <div id='partnersHeader'>Partners</div>
    <div id='partnersContent'>Information about partners</div>
</div>
<div id='company'>
    <div id='companyHeader'>Company</div>
    <div id='companyContent'>Information about company</div>
</div>
<div id='investments'>
    <div id='investmentsHeader'>Investments</div>
    <div id='investmentsContent'>Information about investments</div>
</div>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Based on your source, and the fact that it did work in my fiddle (http://jsfiddle.net/GjuYK/1/)
    I would guess you forgot 

    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
    • 0