URL Query String to select content

Question

I have a number of pages with lessons listed like this:

<div class="et_pb_module">Page Title</div>
<div class="insert-after"></div>
<div class="lesson-container">
   <div class="et_pb_module">
      <div class="content">
        Lesson 1
      </div>
   </div>
   <div class="et_pb_module">
      <div class="content">
        Lesson 2
      </div>
   </div>
   <div class="et_pb_module">
      <div class="content">
        Lesson 3
      </div>
   </div>
   <div class="et_pb_module">
      <div class="content">
        Lesson 4
      </div>
   </div>
</div>

If there is a specific lesson called in the URL's query string I want only that lesson to be shown on the page:

E.g. foo.com/lessons?lesson1 should only show "lesson 1"

I've got an IF statement in jQuery working that does this:

if (window.location.href.indexOf("?lesson1") > -1) {
        $('.et_pb_module').hide();/*Hide all lessons*/
        $('.lesson-container .et_pb_module:nth-of-type(2) .content ').insertAfter('.insert-after'); /*Select content from first lesson and place it at top of the page after 'insert-after'*/
 }

This works fine but will involve me having to cut and past the above up to nine times updating the query string and :nth-of-type selector each time creating lots of repetitious code.

Is there a way I can use an array to compress this process?

Thanks for any feedback.

So why don't you just use a querystring and have a value that represents the section with a class or id that matches it and show it? `?lesson=lesson1` than read lesson to get the value, than select that. — epascarello, Jan 06 '17 at 11:59

score 1 · Accepted Answer · edited May 23 '17 at 12:08

You can solve this by placing an id attribute on the div elements which contain the lesson details. From there you can use the getParameterByName() function referenced in this question to read the value from the URL and then show the required div. Try this:

<div class="et_pb_module">Page Title</div>
<div class="insert-after"></div>
<div class="lesson-container">
  <div class="et_pb_module" id="lesson1">
    <div class="content">Lesson 1</div>
  </div>
  <div class="et_pb_module" id="lesson2">
    <div class="content">Lesson 2</div>
  </div>
  <div class="et_pb_module" id="lesson3">
    <div class="content">Lesson 3</div>
  </div>
  <div class="et_pb_module" id="lesson4">
    <div class="content">Lesson 4</div>
  </div>
</div>

var lesson = getParameterByName('lesson');
if (lesson) {
    $('.lesson-container .et_pb_module').hide();
    $('#' + encodeURIComponent(lesson)).show();
}

Note that for this to work the URLs would need to be in this format:

foo.com/lessons?lesson=lesson1

This works well, but I'm just wanting the selected lessons content div not the encompassing et_pb_module which is an accordion tab and closed by default. Is there a way to select the lessons content div and append to the top as before? — Dan382, Jan 06 '17 at 12:43
Actually I've resolved this question myself. Thanks. One last question. Manually adding lesson ID's is going to take time (this is on many pages). Is there a way to automatically add these? — Dan382, Jan 06 '17 at 13:40

score 0 · Answer 2 · answered Jan 06 '17 at 12:08

Maybe not strictly an jQuery answer, but the same is possible using CSS:

.lesson {
  display: none;
}
.lesson:target {
  display: block;
}

<a href="#1">1</a>
<a href="#2">2</a>
<div id="1" class="lesson">
  DIV 1
</div>
<div id="2" class="lesson">
  DIV 2
</div>

The .lesson:taget becomes active when an div with the id of the current target (so, the anchor link) is available.
For more info on this see https://developer.mozilla.org/nl/docs/Web/CSS/:target

URL Query String to select content

2 Answers2