CODEWITHSUNDEEP
javascriptjqueryhtmlcssdjango
Jimes Denalo
Jimes Denalo

Reputation: 3

Trying to modify a show/hide script so first div opens on page load (Django project)

I'm working on a blog feed and have a script that currently opens up a div and displays it's (the div's) content onclick; however, I would like the first div in the feed to open when the page loads and right now I'm struggling to figure it out. I'm a serious django and javascript/jQuery noobie, so any help that can be offered with this is greatly appreciated.

Currently everything else works. The page loads the feed, all of the divs are closed and when selected they open up.

base.html

<article   id="entry-{{ object.pk }}" {% if continue_reading %} onclick="toggleArticleActive('entry-{{ object.pk }}', true);" {% endif %}>

...blog post content

</article>

tools.js

function toggleArticleActive(article_dom_id, is_active) {
  if (is_active) { // deactivate all that are active
    $('.article-active').each(function(index, value) {
      toggleArticleActive($(this).attr('id'), false);
    });
  }

  var a = $('#' + article_dom_id);
  a.attr("class", is_active ? "article-active" : "");

  if (is_active) {
    a.find(".show-when-article-active").show(); // can animate, e.g. show('slow')
    a.find(".show-when-article-not-active").hide();

    // Load questions about this entry in the main div
    $('#div_activity').load('/f/?entry=' + article_dom_id.replace('entry-','') );
  } else {
    a.find(".show-when-article-active").hide();
    a.find(".show-when-article-not-active").show();
  }
}

Upvotes: 0

Views: 75

Answers (1)

billbo
billbo

Reputation: 41

You should just be able to show the div automatically when the .ready() event is fired.

$( document ).ready(function() {
    $("#firstdiv").show();
});

Where "#firstdiv" is the id of your first div in the list. You can also select the first div using the ":first-child" selector of your containing element:

http://api.jquery.com/first-child-selector/

Upvotes: 0

Related Questions