더보기 버튼 응용? 이랄까..
본문
ul 안에 li로 리스트를 뿌려주는데 리스트가 30개정도 됩니다.
들어가는 내용의 값도 전부 다르구요.
그래서 손코딩을 스크립트 짜주실분 구합니다!
1. 버튼 클릭시 li를 7개씩 추가로 노출
2. ul을 여러개로 나누어 클래스에 숫자를 붙여 버튼 클릭시 클래스i 에 클래스를 붙여(혹은 css 추가) 노출
ul 클래스 .faq
버튼 클래스 .more
답변 3
<ul id="fag" class="faq">
<li><h2>제목1</h2><p>내용1</p></li>
<li><h2>제목2</h2><p>내용2</p></li>
<li><h2>제목3</h2><p>내용3</p></li>
<li><h2>제목4</h2><p>내용4</p></li>
<li><h2>제목5</h2><p>내용5</p></li>
<li><h2>제목6</h2><p>내용6</p></li>
<li><h2>제목7</h2><p>내용7</p></li>
<li><h2>제목8</h2><p>내용8</p></li>
<li><h2>제목9</h2><p>내용9</p></li>
<li><h2>제목10</h2><p>내용10</p></li>
<li><h2>제목11</h2><p>내용11</p></li>
<li><h2>제목12</h2><p>내용12</p></li>
<li><h2>제목13</h2><p>내용13</p></li>
<li><h2>제목14</h2><p>내용14</p></li>
<li><h2>제목15</h2><p>내용15</p></li>
<li><h2>제목16</h2><p>내용16</p></li>
<li><h2>제목17</h2><p>내용17</p></li>
<li><h2>제목18</h2><p>내용18</p></li>
<li><h2>제목19</h2><p>내용19</p></li>
<li><h2>제목20</h2><p>내용20</p></li>
<li><h2>제목21</h2><p>내용21</p></li>
<li><h2>제목22</h2><p>내용22</p></li>
<li><h2>제목23</h2><p>내용23</p></li>
<li><h2>제목24</h2><p>내용24</p></li>
<li><h2>제목25</h2><p>내용25</p></li>
<li><h2>제목26</h2><p>내용26</p></li>
<li><h2>제목27</h2><p>내용27</p></li>
<li><h2>제목28</h2><p>내용28</p></li>
<li><h2>제목29</h2><p>내용29</p></li>
<li><h2>제목30</h2><p>내용30</p></li>
</ul>
<div id="moreBtn" class="moreBtn" style=cursor:pointer>더보기</div>
<div id="startBtn" class="startBtn" style=cursor:pointer>처음으로</div>
<script>
cut = 7;
li = fag.getElementsByTagName("li");
moreBtn.onclick = function() {
for (i = 0; i < li.length; i++) li[i].style.display = "none";
count = count == Math.ceil(li.length / cut) ? 1 : count + 1;
for (j = 0; j < count * cut; j++) if (li[j] !== undefined) li[j].style.display = "block";
}
startBtn.onclick = function() {
count = 0;
for (i = 0; i < li.length; i++) li[i].style.display = "none";
}
startBtn.onclick();
</script>
수정 요청좀 드려도 될까요?
1. '처음으로' 버튼 삭제 (버튼을 넣지않으면 작동하지 않습니다.)
2. 처음엔 7개의 리스트가 노출되었으면 합니다. (처음부터 아무 리스트도 노출되지 않습니다.)
감사합니다!
<ul id="fag" class="faq">
<li><h2>제목1</h2><p>내용1</p></li>
<li><h2>제목2</h2><p>내용2</p></li>
<li><h2>제목3</h2><p>내용3</p></li>
<li><h2>제목4</h2><p>내용4</p></li>
<li><h2>제목5</h2><p>내용5</p></li>
<li><h2>제목6</h2><p>내용6</p></li>
<li><h2>제목7</h2><p>내용7</p></li>
<li><h2>제목8</h2><p>내용8</p></li>
<li><h2>제목9</h2><p>내용9</p></li>
<li><h2>제목10</h2><p>내용10</p></li>
<li><h2>제목11</h2><p>내용11</p></li>
<li><h2>제목12</h2><p>내용12</p></li>
<li><h2>제목13</h2><p>내용13</p></li>
<li><h2>제목14</h2><p>내용14</p></li>
<li><h2>제목15</h2><p>내용15</p></li>
<li><h2>제목16</h2><p>내용16</p></li>
<li><h2>제목17</h2><p>내용17</p></li>
<li><h2>제목18</h2><p>내용18</p></li>
<li><h2>제목19</h2><p>내용19</p></li>
<li><h2>제목20</h2><p>내용20</p></li>
<li><h2>제목21</h2><p>내용21</p></li>
<li><h2>제목22</h2><p>내용22</p></li>
<li><h2>제목23</h2><p>내용23</p></li>
<li><h2>제목24</h2><p>내용24</p></li>
<li><h2>제목25</h2><p>내용25</p></li>
<li><h2>제목26</h2><p>내용26</p></li>
<li><h2>제목27</h2><p>내용27</p></li>
<li><h2>제목28</h2><p>내용28</p></li>
<li><h2>제목29</h2><p>내용29</p></li>
<li><h2>제목30</h2><p>내용30</p></li>
</ul>
<div id="moreBtn" class="moreBtn" style=cursor:pointer>더보기</div>
<script>
cut = 7;
li = fag.getElementsByTagName("li");
moreBtn.onclick = function() {
for (i = 0; i < li.length; i++) li[i].style.display = "none";
count = count == Math.ceil(li.length / cut) ? 1 : count + 1;
for (j = 0; j < count * cut; j++) if (li[j] !== undefined) li[j].style.display = "block";
}
count = 0;
moreBtn.onclick();
</script>
답변 진심으로 감사드립니다!
헌대 맨 마지막리스트 이후 버튼 클릭시 다시 처음으로 돌아가네요..
맨마지막 리스트 노출 후 버튼삭제로 수정 요청드려도 될까요..?
정말 감사드립니다 ㅠ_ㅠ..
답변채택부터 해 주시고 새로운 질문으로 올려주세요.^^
원하는 것을 그림 등으로 그려서 상세히 설명해 주세요.
수정해 드릴 때마다 또 새로운 걸 요구하시니 저도 진이 빠집니다.
죄송합니다 ㅠ_ㅠ.. 채택했습니다!
앞으론 한번에 이해될 수 있도록 글 정리해서 남기도록 하겠습니다 ㅠ_ㅠ..
손코딩을 스크립트 짜주실분은 제작의뢰 게시판에서
구해보셔야 할거같습니다.
아 제가 글을 정리하다가 저부분이 이상하게 써졌네요!
손코딩은 되어있고, 스크립트만 필요합닏다!
제이쿼리는 나쁘지 않은데 자바스크립트가 좀 서툴러서요..
제이쿼리로 충분히 가능한데 꼭 자바스크립트로 하셔야하는 이유가 있으신가요?
짜신 html 봐야 답변드리기 수월할듯합니다
<ul class="faq">
<li>
<h2>제목</h2>
<p>내용</p>
</li>
<li>
<h2>제목</h2>
<p>내용</p>
</li>
</ul>
<div class="moreBtn">더보기</div>
기본적인 형식으로 코딩했습니다!
위의 코딩에서 li 갯수가 30개정도 되구요.
더보기 버튼 클릭 시 li가 7개씩 노출되는 형식이면 좋을것같습니다!
