채택완료
더보기 버튼 응용? 이랄까..
ul 안에 li로 리스트를 뿌려주는데 리스트가 30개정도 됩니다.
들어가는 내용의 값도 전부 다르구요.
그래서 손코딩을 스크립트 짜주실분 구합니다!
1. 버튼 클릭시 li를 7개씩 추가로 노출
2. ul을 여러개로 나누어 클래스에 숫자를 붙여 버튼 클릭시 클래스i 에 클래스를 붙여(혹은 css 추가) 노출
ul 클래스 .faq
버튼 클래스 .more
답변 3개 / 댓글 8개
채택된 답변
+20 포인트
Copy
<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>답변에 대한 댓글 5개
[code]
<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>
[/code]
<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>
[/code]
손코딩을 스크립트 짜주실분은 제작의뢰 게시판에서
구해보셔야 할거같습니다.
답변을 작성하려면 로그인이 필요합니다.
1. '처음으로' 버튼 삭제 (버튼을 넣지않으면 작동하지 않습니다.)
2. 처음엔 7개의 리스트가 노출되었으면 합니다. (처음부터 아무 리스트도 노출되지 않습니다.)
감사합니다!