Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Jan 2011
    Posts
    22
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Read more link is opening the 1st one all the time

    I have a page with about 10 articles on it.

    There is a read more that opens more content when pressed.

    When I press any of the Read More links the 1st article always opens.

    I know I need to give each DIV a unique ID. But i've no idea how.

    here is the Javascript and HTML code.

    Code:
    var WidgetContentHideDisplay = {
        
       init:function() {
           if ($('#content-display-hide').size() == 0) return;
            $('.triggerable').click(function(e){
                var element_id = $(this).attr('rel');
                var element = $('#'+element_id);
                element.toggle();
                if (element.is(':visible')) {
                    $('.readmore').hide();
                } else {
                    $('.readmore').show();
                }
               return false;
           });
        }
      
    }
    
    $(document).ready(function(){ WidgetContentHideDisplay.init(); });

    Code:
    <div id="content-display-hide">
    
        <div id="wrap"><p><?=$this->s("top_area")?></p>
            <p><a href="#" class="readmore triggerable" rel="example-details"><?=$this->s("readmore_label")?></a></p>
            <div id="example-details" style="display:none;"><?=$this->s("expandable_text")?></p>
    <p><a href="#" class='triggerable' rel='example-details'><?=$this->s("close_label")?></a></p>
          </div>
    </div>
        
        </div>
    Any help would be great.

    Thanks.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,642
    Thanks
    6
    Thanked 1,005 Times in 978 Posts
    No, you don’t necessarily need a unique ID, you just need to traverse the DOM from each trigger to open the respective section. This can be done with an each() loop but doesn’t even have to be.

    I assume you have full control over the HTML code used.
    First of all you need to keep the semantics in mind. If you have an anchor element that doesn’t link anything then remove the href attribute or don’t use an anchor element in the first place. You can use any element and style it to look like a link and attach JS functionality to it. First you always have to think about what should happen if there was no JavaScript. A link without reference is useless.

    If we consistently apply the rules of semantics and separation of concerns then we wouldn’t even have hard coded opening and closing links in there, we would generate them with JS since without JS there wouldn’t be any opening/closing functionality anyway and such links wouldn’t make sense. So, your HTML shold look like this:
    Code:
    <script type="text/javascript">
      // put this somewhere in the head of the document
      var readMoreLabel = '<?=$this->s("readmore_label")?>';
      var closeLabel = '<?=$this->s("close_label")?>';
    </script>
    Code:
    <div id="content-display-hide">
        <div class="wrap">
          <p><?=$this->s("top_area")?></p>
          <p class="more"><?=$this->s("expandable_text")?></p>
        </div>
        … (there can be more sections like the above here) …
    </div>
    See how clean the HTML is now?
    And then the JS inside the init function would look something like this:

    PHP Code:
    if ($('#content-display-hide').length) {
        $(
    '#content-display-hide').addClass('js').children('.wrap').append(
          $(
    '<a>', {
              
    textreadMoreLabel,
              
    'class''read_more',
              
    click: function() {
                  var 
    el = $(this);
                  var 
    moreText el.prev(); // that’s the expandable element
                  
    if(moreText.is(':visible')) {
                      
    moreText.hide();
                      
    el.text(readMoreLabel);
                  }
                  else {
                      
    moreText.show();
                      
    el.text(closeLabel);
                  }
              }
          })
        ); 
    // close append()
    }); 
    So, now you just need to style your content according to your needs and everything works automatically. I’ve added a class “js” to the global wrapper (#content-display-hide) so you can apply styles only if JS is enabled, e. g. the hiding of the expandable content. This should be done in the stylesheet, not with inline CSS.
    Code:
    #content-display-hide.js .more {display: none;}
    #content-display-hide .read_more {
      cursor: pointer;
      …
      (style like link)
      …
    }
    Note: I didn’t test this code, just wrote it from mind right now. It should work but if it doesn’t don’t give up just yet. Let me know and we’ll fix it.
    Last edited by VIPStephan; 04-22-2014 at 02:02 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •