I need load() to only work once on click and my toggle() to continue to work 'jQuery'

[dsamajr]

I’m trying to have a drop down menu display the code from codepage.html in a hidden div and still have the toggle() work to display and hide it after the content is already loaded, but I only want it to load once. I have tried one() but it stops the toggle and i’m not sure how to do and if statement for whether or not the content has already been loaded. it can be viewed at http://dsamajr.com/portfolio.php

<script type="text/javascript">
$(document).ready(function(){
    $(".dropMenu").click(function () {
		var idNum = $(this).attr("id");
		var idEdit = idNum.substr(2);
		$("#mI"+idEdit).toggle();

  // I know this doesn't work it just shows what i'm trying to do					
		$(this).one('click', fucntion () {	
			$("#mI"+idEdit).load("portfolio/codepage.html");
		});
		
    });
});
</script>



            <div class="dropMenu" id="dM2">
                <span style="padding:10px;width:25%;float:left;">NAME OF MENU</span>
                <span style="padding:10px;float:right;"><!-- img here --></span> 
            </div>
            <div class="menuItem" id="mI2">
            </div>

[PaulOB]

I’m a bit out of my depth here but couldn’t you just check if the content is present and if not load it.

e.g.

$(document).ready(function(){
    $(".dropMenu").click(function () {
        var idNum = $(this).attr("id");
        var idEdit = idNum.substr(2);
        var myTarget = $("#mI"+idEdit); 
        myTarget.toggle();
        if( !$.trim( $(myTarget).html() ).length ) {
            alert('loaded once');//for testing
            $("#mI"+idEdit).load("portfolio/codepage.html");
        }
    });
});

[James_Hibbard]

I’m a bit uncertainas to what you are trying to do.
You have an accordion on the right hand side of the page that you link to and a sidebar(?) on the left.

What should happen when you click one of the accordion panels to open it?
Where is this hidden div?

Is it the case that you start with an empty accordion (i.e. the panels only).
When you click on a panel the first time, then some HTML should be dynamically loaded into the content area of the accordion. When you click on the same panel again, then the accordion should toggle and the content should stay in place?

If this is so, maybe you could do it like this:

<div class="dropMenu" data-url="portfolio/page_1.html">
  <span>NAME OF MENU</span>
</div>
<div class="menuItem"></div>

$(".dropMenu").on("click", function(){
  var $contentPane = $(this).next();
  if (!$contentPane).data("loaded"){
    var url = $(this).data("url");
    $contentPane.load(url, function(){
      $contentPane.data("loaded", "loaded");
    })
  }
  $contentPane.toggle();
});

This is untested, as I am not sure that this is what you want.

[dsamajr]

Yes that’s pet much exactly what I was trying to do. Thank you.