GD77 Posted September 13, 2012 Share Posted September 13, 2012 Hello: I need to have a table row showing one or two lines of data and when click to show the remaining... been trying with Google but having what I want.... Thanks... Quote Link to comment Share on other sites More sharing options...
Jessica Posted September 13, 2012 Share Posted September 13, 2012 http://api.jquery.com/slideDown/ Quote Link to comment Share on other sites More sharing options...
GD77 Posted September 15, 2012 Author Share Posted September 15, 2012 jesirose thx but that is not doing what I want or at least m not figuring it out... here is what I m trying to do: http://picpaste.com/pics/tbl-yzq03lOx.1347715252.png as you see one column have long text I just want to be able to show one line of that column until it s clicked and that will be dynamic for each row. Quote Link to comment Share on other sites More sharing options...
Jessica Posted September 15, 2012 Share Posted September 15, 2012 What have you coded so far? Quote Link to comment Share on other sites More sharing options...
GD77 Posted September 15, 2012 Author Share Posted September 15, 2012 ntg just been testing with different scripts and been trying to target the height of that row with css nothing working :/ Quote Link to comment Share on other sites More sharing options...
GD77 Posted September 15, 2012 Author Share Posted September 15, 2012 ok i m here now: <head> <script src="jquery.js"></script> <script> $(document).ready(function(){ $("#tog").click(function(){ $("li").toggle(); }); }); </script> </head> <body> <div id='tog'>Toggle</div> <ul> <li>text 1.</li> <li>text 2.</li> <li>text 3.</li> </ul> how to exclude the first type of <li> ? Quote Link to comment Share on other sites More sharing options...
Adam Posted September 16, 2012 Share Posted September 16, 2012 Your selector is an <li> tag, which will match each of the items in the list. You need to provide them with something unique to use within the selector, or access the 'nth child' if it's all dynamic. Quote Link to comment Share on other sites More sharing options...
GD77 Posted September 16, 2012 Author Share Posted September 16, 2012 I'll simplify it more: how to achieve read more like when you read some text and you click on read more in the same page it expands... Quote Link to comment Share on other sites More sharing options...
Christian F. Posted September 16, 2012 Share Posted September 16, 2012 Send a reference to the element that the function call originated from, and operate on that. Mahngiel posted an example of almost the exact same effect earlier today, so I recommend looking up that post. Quote Link to comment Share on other sites More sharing options...
Mahngiel Posted September 16, 2012 Share Posted September 16, 2012 Mahngiel posted an example of almost the exact same effect earlier today, so I recommend looking up that post. Where? I dunno what you're referencing lol Quote Link to comment Share on other sites More sharing options...
Christian F. Posted September 17, 2012 Share Posted September 17, 2012 Sorry, I meant monkuar. For some reason I keep mixing the two of you. Quote Link to comment Share on other sites More sharing options...
GD77 Posted September 17, 2012 Author Share Posted September 17, 2012 found this online: <div class="item"> Text goes in here. </div> $(function(){ /* to make sure the script runs after page load */ $('.item').each(function(event){ /* select all divs with the item class */ var max_length = 150; /* set the max content length before a read more link will be added */ if($(this).html().length > max_length){ /* check for content length */ var short_content = $(this).html().substr(0,max_length); /* split the content in two parts */ var long_content = $(this).html().substr(max_length); $(this).html(short_content+ '<a href="#" class="read_more"><br/>Read More</a>'+ '<span class="more_text" style="display:none;">'+long_content+'</span>'); /* Alter the html to allow the read more functionality */ $(this).find('a.read_more').click(function(event){ /* find the a.read_more element within the new html and bind the following code to it */ event.preventDefault(); /* prevent the a from changing the url */ $(this).hide(); /* hide the read more button */ $(this).parents('.item').find('.more_text').show(); /* show the .more_text span */ }); } }); }); Can we have it to toggle plz? Quote Link to comment Share on other sites More sharing options...
GD77 Posted September 17, 2012 Author Share Posted September 17, 2012 ok Solved it with the following: <div class="more-less"> <div class="more-block"> long text....... </div> </div> $(function(){ // The height of the content block when it's not expanded var adjustheight = 80; // The "more" link text var moreText = "+ More"; // The "less" link text var lessText = "- Less"; // Sets the .more-block div to the specified height and hides any content that overflows $(".more-less .more-block").css('height', adjustheight).css('overflow', 'hidden'); // The section added to the bottom of the "more-less" div $(".more-less").append('<p class="continued">[…]</p><a href="#" class="adjust"></a>'); $("a.adjust").text(moreText); $(".adjust").toggle(function() { $(this).parents("div:first").find(".more-block").css('height', 'auto').css('overflow', 'visible'); // Hide the [...] when expanded $(this).parents("div:first").find("p.continued").css('display', 'none'); $(this).text(lessText); }, function() { $(this).parents("div:first").find(".more-block").css('height', adjustheight).css('overflow', 'hidden'); $(this).parents("div:first").find("p.continued").css('display', 'block'); $(this).text(moreText); }); }); Found it somewhere hope someone needs it one day too. Thanks again for anyone tried to help Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.