더보기(MORE) 버튼을 눌러 일정갯수의 리스트(목록) 더 보기

SHARE

DEMO

아래 데모페이지를 확인해주세요.
더 보기 버튼을 눌러 리스트를 불러올 수 있습니다.

DEMO

html

css

js

load('#js-load', '4'); 이 부분의 숫자를 변경하면 더 보기를 눌렀을 때 몇 개씩 더 보여줄 것인가 변경할 수 있습니다.

댓글

  1. 댓글:

    데모페이지 들어가셔서, html/css/js 복사해서 사용하시면 될텐데… 이 부분 관련 질문입니다

    데모페이지 들어가서 복사를 어디서 하나요?? 제 눈에는 아무리 봐도 보이지를 않아서요 js 파일드이 어디에 있는지요 –;;

  2. 나그네 댓글:

    감사합니다.

  3. 댓글:

    정말 큰 도움이 되었습니다^^
    감사합니다~!!!

  4. 질문글 댓글:

    안녕하세요 글 잘 보았습니다.
    하나 질문이 있는데 데이터가 너무 많은것을 한번에 가져오게 되는데 데이터 를 너무 많이 가져오니

    해결방법으로 더보기 눌렀을때 만 데이터를 4개씩 가져오도록 할수도 있나요??

    • nanati 댓글:

      안녕하세요! 새해 복 많이 받으세요^^
      죄송한데 질문의 요지를 잘 모르겠어요~
      지금 현재 샘플을 보시면 더보기를 눌렀을때만 4개 나오도록 되어있을텐데..
      데이터가 너무 많은 것을 한번에 가져오게 된다는게 무슨 말씀이신지 모르겠네요 ㅠㅠ

  5. ㅇㅇㅇ 댓글:

    안녕하세요, 더보기 버튼으로 며칠을 애먹다가 이 글을 보고 해결했습니다. 그런데 한 가지 문제점이, 웹에선 문제 없이 작동하지만 모바일 브라우저로 테스트 해보면 js-load 클래스를 적용한 리스트는 보이지 않는 현상이 생기네요. html과 css가 완전히 같은 리스트인데 한쪽에 위 코드를 적용시키니 위 코드를 적용시킨 리스트만 보이지 않았습니다. 사파리, 삼성, 네이버, 크롬으로 확인했는데 모두 같은 현상이 일어났구요. 캐시가 문제인가 싶어서 사파리 방문기록과 캐시를 삭제하고 다시 로드했더니 정상적으로 작동되었습니다. 문제는 페이지를 새로고침을 할 때마다 방문기록과 캐시삭제를 해주어야 리스트가 보인다는 점이었습니다. 이런 경우엔 어떻게 해결해야 하는지 알고 계시나요?

    • nanati 댓글:

      안녕하세요! 방문 감사합니다!
      죄송한데, 말씀하시는 문제점에 대해서 제가 잘 이해를 못했습니다.
      (글로 설명하시는 것만 읽고는 어떤 문제점인지 파악이 잘 안되네요)
      직접 테스트 하신 페이지가 있다면 링크를 남겨주시는 것이 가장 좋을 것 같습니다.

  6. 가니에 댓글:

    감사합니다.
    헤매던 작업을
    덕분에 해결하였습니다.

  7. 최아름 댓글:

    ㅠㅠㅠㅠ과제중에 발견했는데 너무 유용한 정보가 많아요 ㅠㅠ 감사합니다 ㅠㅠㅠ
    깨갱!!

  8. 감사합니다 댓글:

    안녕하세요 좋은 정보 감사합니다! 그런데 마지막에 4개보다 적게 남았을때는 더보기해도 나오지 않는데 혹시 이건 어떻게 해야될가요?ㅠㅠ

    • nanati 댓글:

      헛… 댓글보고 잘못된 부분을 찾았습니다. 감사합니다!
      js 16번째줄 수정했습니다.
      다시한번 적용해보시면 될거예요~^^

  9. 하하 댓글:

    감사해용~ 잘 보았습니다^^

  10. 장장 댓글:

    감사합니다~~
    db 불러올때 응용해서 쓰면 되겠네요

  11. sunnydyd 댓글:

    안녕하세요. 항상 포스팅을 보면서 많이 배우고 좋은 자료를 얻고 갑니다.
    이번 포스팅의 내용도 테스트를 해보고 싶은데,
    예제를 첨부파일로 혹시 올려주실 수 있을까요?
    링크하신 스크립트를 사용할 수가 없어서…

    • nanati 댓글:

      안녕하세요 방문 댓글 감사합니다^^
      링크한 스크립트를 사용할 수 없다는게 무슨 말씀이신지 잘 이해가 안되는데요~
      데모페이지 들어가셔서, html/css/js 복사해서 사용하시면 될텐데…
      어느 스크립트가 사용이 안되시나요?
      정확한 설명을 댓글로 하기 어려우시면 프로필 페이지에 있는
      멜 주소로 이멜 보내주세요^^

  12. 홍간지 댓글:

    너무 좋은 정보 알려주셔서 감사합니다..
    근데 혹시 저 더보기 버튼에 링크걸기는 가능한가요??
    예를 들어서 총 12개까지 더 보이게 하고나서 마지막에는 버튼을 클릭하면 페이지이동을 할수 있도록 가능할까요?….. 아니면 버튼이 사라지게 가능할까요??

    • nanati 댓글:

      죄송합니다~ 저도 거기까진 모르겠네요 ㅎ
      블로그의 글 들은 제가 검색으로 해결한 내용들을 정리해 놓은거라,
      자바스크립트나 제이쿼리에 대해서는 무지합니다~
      개발자분들께 여쭤보시면 해결책을 얻으실 수 있으실지도… ㅠㅠ
      개발자커뮤니티를 찾아보세요^^ 해결 못드려 죄송해요~