Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by William J. Terrell
William J. Terrell
17,403 Points

Changing the state of an element for print

I think this should be a fairly straightforward answer, but I'm not sure.

We have several pages on our website that use "accordions". One such page can be found here:

http://www.williamwoods.edu/academics/undergraduate/academic_calendar.html

You'll note that each of the sections expand to reveal their contents. This is done using the following jQuery:

//Accordion
$(document).ready(function(){
  $('.accordion .accordion-item .accordion-content').css("display", "none");
  $('.accordion .accordion-item .accordion-content .accordion .accordion-item .accordion-content').css("display", "block");

  $('.accordion .accordion-item .accordion-heading').click(function() {

    var a = $(this).closest('.accordion-item');
    var b = $(a).hasClass('open');
    var c = $(a).closest('.accordion').find('.open');

    //Only one open at a time  
    // if(b != true) {
    //   $(c).find('.accordion-content').slideUp(200);
    //   $(c).removeClass('open');
    // }

    $(a).toggleClass('open');
    $(a).find('.accordion-content').slideToggle(200);



  });
});

As far as I can tell, all that jQuery does is switch < div class="accordion-content" style="display: none;" > with < div class="accordion-content" style="display: block;" >

What I would like to know is how might I go about modifying the CSS or jQuery so that, when someone goes to print the page, the "accordion-content" div is set to "display: block;"

Thanks!

2 Answers

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,863 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,863 Points

If that's the case, using !important should (maybe) override the inline style being injected by jQuery.

@media print {
    .accordion-content {
        display: block !important;
    }
}

:dizzy:

William J. Terrell
William J. Terrell
17,403 Points

So, yeah... "Important" works...

It displays our mobile styling, which might lead to some length issues for content that's in tables, but that's a whole different deal.

Thanks!

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,863 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,863 Points

Hey William,

You should be able to accomplish that with a CSS Media Query. Try:

@media print {
    .accordion-content {
        display: block;
    }
}

:dizzy:

William J. Terrell
William J. Terrell
17,403 Points

Nope, I tried that and it didn't work. The .css() function in the jQuery seems to add a style="" to the HTML, so I would need something that would overwrite that when a user went to print...

I don't suppose there would be anything in the "window" thing, native to the browser (the thing you get when you type console.log(window); in the console) what would have a "print" thing I could check against... Something like:

if (window.print = true) {
     $('.accordion .accordion-item .accordion-content .accordion .accordion-item .accordion-content').css("display", "block");
} else {
     $('.accordion .accordion-item .accordion-content').css("display", "none");
}
Jason Anders
Jason Anders
Treehouse Moderator 145,863 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,863 Points

I haven't worked with JavaScrip or jQuery for a long time, so I'm not sure on that. I'm sorry I couldn't be much more help. I was really hoping that it would be an easy CSS fix.

Tagging: Andrew Chalkley for some advice?

:dizzy:

William J. Terrell
William J. Terrell
17,403 Points

The thing is the specificity... Because the Js/jQuery applies inline styling, that "always wins", so if I try to use CSS to apply styling to a class or ID, it "loses"...

I do know that there is a window.print(); function...presumably that's what "fires" when someone clicks the button to print their page... So I'm thinking that, if I can write something that says...

when window.print() {
     $('.accordion .accordion-item .accordion-content .accordion .accordion-item .accordion-content').css("display", "block");
};

But I don't know if that will work, since I assume that the .print() function just generates a snapshot of the page as it is displayed at the time...

................... .......... ..........? ..........