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

Phillip Legault
PLUS
Phillip Legault
Courses Plus Student 18,888 Points
Posted by Phillip Legault
Phillip Legault
Courses Plus Student 18,888 Points

:target pseudo-class javascript

I have css code for a TOC that works fine

:target {
 color: red;
}

Now what I want to do is expand the target that is collapsed. I have something like this for when I send someone the link

if (hash !== "") {
     $(hash).parent().parent().removeClass('mw-collapsed');
    $($(hash).parent().parent().children()[0]).addClass('mw-collapsible-toggle-expanded')
    $($(hash).parent().parent().children()[0]).removeClass('mw-collapsible-toggle-collapsed')
    $($(hash).parent().parent().children()[2]).attr('style', 'display: block; overflow: hidden;')
    $($(hash).parent().parent().children()[0]).html("<a href='#'>Collapse</a>")
}

and something like this for in page links

$('.toctext').click(function() {
    var id = $(this).parent().attr('href');
    $(id).parent().parent().removeClass('mw-collapsed');
    $($(id).parent().parent().children()[0]).addClass('mw-collapsible-toggle-expanded')
    $($(id).parent().parent().children()[0]).removeClass('mw-collapsible-toggle-collapsed')
    $($(id).parent().parent().children()[2]).attr('style', 'display: block; overflow: hidden;')
    $($($(id).parent().parent().children()[0]).children()[0]).html("Collapse")
});
}

This is a bit buggy and I'm trying to find a simpler way

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Hi Phillip Legault, just letting you know that I've formatted your code with code blocks. Please refer to the Markdown Cheatsheet (linked below the question/comment/answer text box) on how to format code blocks.

5 Answers

Iain Simmons
MOD
Iain Simmons
Treehouse Moderator 32,305 Points
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Assuming you're using jQuery, you've got a very strange combination of methods here to do what you're trying to do.

Can you include an example of the HTML so I can better help with cleaning this up?

A few things you can look at changing:

  • Instead of .parent().parent().children(), use closest() and find() and use selectors to get the specific HTML elements you need.
  • Instead of .attr('style', ...), use css() or just try show() if all you need to do is show/hide it.
  • Use window.location.hash to get the current target (includes the hash/# symbol) for use within JavaScript.

All that being said, why not just have the ID assigned to a div that encompasses all the content you want to 'show' or 'expand', and use the :target pseudo-class in the CSS with display:block?

Phillip Legault
PLUS
Phillip Legault
Courses Plus Student 18,888 Points
Phillip Legault
Phillip Legault
Courses Plus Student 18,888 Points

This is a mediawiki page and a piece of the HTML code

            <p>
            <table align="left">
<tr>
<td> <div id="toc" class="toc"><div id="toctitle"><h2>Contents</h2></div>
<ul>
<li class="toclevel-1"><a href="#Home_Page_Navigation"><span class="tocnumber">1</span> <span class="toctext">Home Page Navigation</span></a></li>
<li class="toclevel-1"><a href="#Exploring_Data"><span class="tocnumber">2</span> <span class="toctext">Exploring Data</span></a></li>
<li class="toclevel-1"><a href="#Searching_Content"><span class="tocnumber">3</span> <span class="toctext">Searching Content</span></a></li>
<li class="toclevel-1"><a href="#Downloading_kai_Reports"><span class="tocnumber">4</span> <span class="toctext">Downloading kai Reports</span></a></li>
<li class="toclevel-1"><a href="#Using_kai_Query"><span class="tocnumber">5</span> <span class="toctext">Using kai Query</span></a></li>
<li class="toclevel-1"><a href="#Create_a_New_Page"><span class="tocnumber">6</span> <span class="toctext">Create a New Page</span></a></li>
<li class="toclevel-1"><a href="#Creating_a_New_Technology.2FRoadmap"><span class="tocnumber">7</span> <span class="toctext">Creating a New Technology/Roadmap</span></a></li>
<li class="toclevel-1"><a href="#Creating_a_Standards_Guidance_Page"><span class="tocnumber">8</span> <span class="toctext">Creating a Standards Guidance Page</span></a></li>
<li class="toclevel-1"><a href="#Creating_a_Strategic_Architecture_Page"><span class="tocnumber">9</span> <span class="toctext">Creating a Strategic Architecture Page</span></a></li>
<li class="toclevel-1"><a href="#Editing_a_Page"><span class="tocnumber">10</span> <span class="toctext">Editing a Page</span></a></li>
<li class="toclevel-1"><a href="#Text_Formatting"><span class="tocnumber">11</span> <span class="toctext">Text Formatting</span></a></li>
<li class="toclevel-1"><a href="#Linking_Pages"><span class="tocnumber">12</span> <span class="toctext">Linking Pages</span></a></li>
<li class="toclevel-1"><a href="#Adding_Images"><span class="tocnumber">13</span> <span class="toctext">Adding Images</span></a></li>
<li class="toclevel-1"><a href="#Watching_a_Page"><span class="tocnumber">14</span> <span class="toctext">Watching a Page</span></a></li>
<li class="toclevel-1"><a href="#Comment_on_a_Page.2FCreate_a_Discussion"><span class="tocnumber">15</span> <span class="toctext">Comment on a Page/Create a Discussion</span></a></li>
<li class="toclevel-1"><a href="#Add.2C_Remove.2C_or_update_a_DBpedia_Description"><span class="tocnumber">16</span> <span class="toctext">Add, Remove, or update a  DBpedia Description</span></a></li>
<li class="toclevel-1"><a href="#Known_Bugs"><span class="tocnumber">17</span> <span class="toctext">Known Bugs</span></a></li>
<li class="toclevel-1"><a href="#Flagging_a_Page"><span class="tocnumber">18</span> <span class="toctext">Flagging a Page</span></a></li>
<li class="toclevel-1"><a href="#Using_the_Image_Map"><span class="tocnumber">19</span> <span class="toctext">Using the Image Map</span></a></li>
<li class="toclevel-1"><a href="#Link_back_to_the_top_of_the_page_for_pages_with_large_index"><span class="tocnumber">20</span> <span class="toctext">Link back to the top of the page for pages with large index</span></a></li>
<li class="toclevel-1"><a href="#Adding_tool_tips"><span class="tocnumber">21</span> <span class="toctext">Adding tool tips</span></a></li>
<li class="toclevel-1"><a href="#Embedding_Videos_from_know_services_like_YouTube"><span class="tocnumber">22</span> <span class="toctext">Embedding Videos from know services like YouTube</span></a></li>
<li class="toclevel-1"><a href="#Setting_the_Time_Zone"><span class="tocnumber">23</span> <span class="toctext">Setting the Time Zone</span></a></li>
<li class="toclevel-1"><a href="#Creating_Your_Profile_Page"><span class="tocnumber">24</span> <span class="toctext">Creating Your Profile Page</span></a></li>
<li class="toclevel-1"><a href="#Creating_a_slide_show_of_images_or_text"><span class="tocnumber">25</span> <span class="toctext">Creating a slide show of images or text</span></a></li>
<li class="toclevel-1"><a href="#Creating_a_presentation_of_Pages"><span class="tocnumber">26</span> <span class="toctext">Creating a presentation of Pages</span></a></li>
<li class="toclevel-1"><a href="#Adding_Tabs_to_your_page"><span class="tocnumber">27</span> <span class="toctext">Adding Tabs to your page</span></a></li>
<li class="toclevel-1"><a href="#Get_additional_assistance-provide_feedback"><span class="tocnumber">28</span> <span class="toctext">Get additional assistance-provide feedback</span></a></li>
</ul>
</div>

</td></tr></table>
<p><br clear="both" />
</p><p><br />
</p>
<hr />
<div class="fixed"><a href="#top">TOC</a></div>
<div class="toccolours mw-collapsible mw-collapsed" style="width:60%">
    <h4><span class="mw-headline" id="Home_Page_Navigation">Home Page Navigation</span></h4>
    <div class="mw-collapsible-content">
<p><big><b>Logging In</b></big>
</p>
<ol>
<li> Click the Person Icon at  the top right of the page.
</li>
<li> Select Log in from the drop-down list.
</li>
<li> Enter your NT Log In credentials.
</li>
<li> Click &lt;Log in&gt;.
</li>
</ol>
<div class="floatleft"><a href="/index.php?title=Special:Upload&amp;wpDestFile=Log_in_screen.JPG" class="new" title="File:Log in screen.JPG">650px</a></div>
<p><br clear="all" />
<big><b>Home Page Overview</b></big>
</p>
<div class="floatleft"><a href="/index.php?title=Special:Upload&amp;wpDestFile=Revised_hm_page_2.JPG" class="new" title="File:Revised hm page 2.JPG">650px</a></div>
<p><br clear="all" />.
</p>
    </div>
</div>
<div class="toccolours mw-collapsible mw-collapsed" style="width:60%">
    <h4><span class="mw-headline" id="Exploring_Data">Exploring Data</span></h4>
    <div class="mw-collapsible-content">
<ol>
<li> From the top menu, or right hand icons, click on the &lt;Explore&gt; button
</li>
<li> Once on the Explore page there are various ways to browse the data.  From the menu on the right you can search data in various ways:
</li>
</ol>
<dl>
<dd>- CATEGORY
<dl>
<dd><ul>
<li> Technology, alphabetically: will give you the current ITS supported technologies and the support roadmaps.  Note that filters have been created on the Technology page to help you find the data you are looking for
</li>
<li> Standard: will provide you with additional technical guidance from the Technology Owners and Contacts.  Note that filters have been created on the Standards page to help you find he data you are looking for
</li>
<li> Publication: a list of all published content on the site
</li>
<li> Training: a list of training resources available to IT professionals
</li>
</ul>
</dd>
</dl>
</dd>
<dd>- GROUP: we have various groups that are using kai to share pertinent information
</dd>
</dl>
    </div>
</div>
Phillip Legault
PLUS
Phillip Legault
Courses Plus Student 18,888 Points
Phillip Legault
Phillip Legault
Courses Plus Student 18,888 Points

This is collapsed

<div class="toccolours mw-collapsible mw-collapsed" style="width:60%"><span class="mw-collapsible-toggle mw-collapsible-toggle-collapsed" tabindex="0">&nbsp;[<a href="#">Expand</a>]&nbsp;</span>
    <h4><span class="mw-headline" id="Exploring_Data">Exploring Data</span></h4>
    <div class="mw-collapsible-content" style="display: none;">
<ol>
<li> From the top menu, or right hand icons, click on the &lt;Explore&gt; button
</li>
<li> Once on the Explore page there are various ways to browse the data.  From the menu on the right you can search data in various ways:
</li>
</ol>
<dl>
<dd>- CATEGORY
<dl>
<dd><ul>
<li> Technology, alphabetically: will give you the current ITS supported technologies and the support roadmaps.  Note that filters have been created on the Technology page to help you find the data you are looking for
</li>
<li> Standard: will provide you with additional technical guidance from the Technology Owners and Contacts.  Note that filters have been created on the Standards page to help you find he data you are looking for
</li>
<li> Publication: a list of all published content on the site
</li>
<li> Training: a list of training resources available to IT professionals
</li>
</ul>
</dd>
</dl>
</dd>
<dd>- GROUP: we have various groups that are using kai to share pertinent information
</dd>
</dl>
    </div>
</div>

This is expanded

<div class="toccolours mw-collapsible" style="width:60%"><span class="mw-collapsible-toggle mw-collapsible-toggle-expanded" tabindex="0">&nbsp;[<a href="#">Collapse</a>]&nbsp;</span>
    <h4><span class="mw-headline" id="Exploring_Data">Exploring Data</span></h4>
    <div class="mw-collapsible-content" style="display: block; overflow: hidden;">
<ol>
<li> From the top menu, or right hand icons, click on the &lt;Explore&gt; button
</li>
<li> Once on the Explore page there are various ways to browse the data.  From the menu on the right you can search data in various ways:
</li>
</ol>
<dl>
<dd>- CATEGORY
<dl>
<dd><ul>
<li> Technology, alphabetically: will give you the current ITS supported technologies and the support roadmaps.  Note that filters have been created on the Technology page to help you find the data you are looking for
</li>
<li> Standard: will provide you with additional technical guidance from the Technology Owners and Contacts.  Note that filters have been created on the Standards page to help you find he data you are looking for
</li>
<li> Publication: a list of all published content on the site
</li>
<li> Training: a list of training resources available to IT professionals
</li>
</ul>
</dd>
</dl>
</dd>
<dd>- GROUP: we have various groups that are using kai to share pertinent information
</dd>
</dl>
    </div>
</div>
Phillip Legault
PLUS
Phillip Legault
Courses Plus Student 18,888 Points
Phillip Legault
Phillip Legault
Courses Plus Student 18,888 Points

looks like the use css() closest() resolved the buggy stuff

Iain Simmons
MOD
Iain Simmons
Treehouse Moderator 32,305 Points
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Oh it's MediaWiki... so you may not have a whole lot of control over how the table of contents HTML is generated. No problem.

Based on the HTML, I'd suggest changing the click event handler to be on the a tags within the #toc div, like so:

$('#toc').on('click', 'a', function() {
    var id = $(this).attr('href');
    var collapsibleContainer = $(id).closest('.mw-collapsible');
    var collapsibleToggle = collapsibleContainer.find('.mw-collapsible-toggle');
    var collapsibleContent = collapsibleContainer.find('.mw-collapsible-content');

    collapsibleContainer.removeClass('mw-collapsed');
    collapsibleToggle.addClass('mw-collapsible-toggle-expanded').removeClass('mw-collapsible-toggle-collapsed');
    collapsibleContent.show();
    collapsibleToggle.children('a').text("Collapse");
});

Then do something similar (use variables for any element that you might need to access more than once) for the hash conditional.

Even better, you could try and put it all into a function, using a hash as the parameter.

Also, to improve it, you'd want to make sure you're only collapsing if it's expanded and vice-versa. You can use jQuery's hasClass() method to do that.

Happy coding!